my canvas-draw.ts file code
import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
@Component({
selector: ‘canvas-draw’,
templateUrl: ‘canvas-draw.html’
})
export class CanvasDraw {
@ViewChild('myCanvas') canvas: any;
canvasElement: any;
lastX: number;
lastY: number;
public photos : any;
base64Image:any;
currentColour: string = '#1abc9c';
availableColours: any;
brushSize: number = 10;
constructor(public platform: Platform, public renderer: Renderer,private camera : Camera,public navCtrl: NavController, public navParams: NavParams) {
console.log('Hello CanvasDraw Component');
this.availableColours = [
'#1abc9c',
'#3498db',
'#9b59b6',
'#e67e22',
'#e74c3c'
];
}
ngAfterViewInit(){
this.canvasElement = this.canvas.nativeElement;
this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');
}
changeColour(colour){
this.currentColour = colour;
}
changeSize(size){
this.brushSize = size;
}
handleStart(ev){
this.lastX = ev.touches[0].pageX;
this.lastY = ev.touches[0].pageY;
}
handleMove(ev){
let ctx = this.canvasElement.getContext('2d');
let currentX = ev.touches[0].pageX;
let currentY = ev.touches[0].pageY;
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(this.lastX, this.lastY);
ctx.lineTo(currentX, currentY);
ctx.closePath();
ctx.strokeStyle = this.currentColour;
ctx.lineWidth = this.brushSize;
ctx.stroke();
this.lastX = currentX;
this.lastY = currentY;
}
clearCanvas(){
let ctx = this.canvasElement.getContext('2d');
ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
}
// takePhoto() {
// const options : CameraOptions = {
// quality: 50, // picture quality
// destinationType: this.camera.DestinationType.DATA_URL,
// encodingType: this.camera.EncodingType.JPEG,
// mediaType: this.camera.MediaType.PICTURE
// }
// this.camera.getPicture(options) .then((imageData) => {
// this.base64Image = "data:image/jpeg;base64," + imageData;
// this.photos.push(this.base64Image);
// this.photos.reverse();
// }, (err) => {
// console.log(err);
// });
// }
takePhoto()
{
var image = new Image();
let ctx = this.canvasElement.getContext('2d');
const options : CameraOptions =
{
quality: 50, // picture quality
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options) .then((imageData) =>
{
this.base64Image = "data:image/jpeg;base64," + imageData;
//this.photos.push(this.base64Image);
//this.photos.reverse();
//canvas.push(this.base64Image);
image.src=this.base64Image;
// ctx.drawImage(image, 0, 0);
ctx.drawImage(image, 0, 0, image.width, image.height, // source rectangle
0, 0, this.canvasElement.width, this.canvasElement.height)
//handleStart();
/*image.onload = function() {
this._CONTEXT.drawImage(image, 0, 0);
};*/
//this._CONTEXT.drawImage(image,0,0);
/*this._CONTEXT.drawImage(image, 0, 0, image.width, image.height, // source rectangle
0, 0, this._CANVAS.width, this._CANVAS.height);*/
}, (err) => {
console.log(err);
});
}
}