am making one application in which task is drawing on image which is placed on canvas…drawing on image works well …but how can i performed undo and redo operation in canvas code or function please my 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’;
import { AlertController} from ‘ionic-angular’;
@Component({
selector: ‘canvas-draw’,
templateUrl: ‘canvas-draw.html’
})
export class CanvasDraw {
@ViewChild('myCanvas') canvas: any ;
CANVAS_width= 500;
CANVAS_height= 700;
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,private alertCtrl: AlertController) {
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() + '');
}
ngOnInit() {
this.photos = [];
}
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);
this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));
this.canvasElement.addEventListener('touchmove', ev => this.handleMove(ev));
}
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);
ctx.drawImage(image, 0, 0, image.width,image.height, // source rectangle
0, 0, this.CANVAS_width, this.CANVAS_height);
this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));
this.canvasElement.addEventListener(‘touchmove’, ev => this.handleMove(ev));
}, (err) => {
console.log(err);
});
}
}
