I am currently a software engineering trainee, focusing on learning Angular CLI. My current project involves image cropping on a canvas, where I draw a circle when clicked.
My query pertains to moving the circle with a mousedown event and stopping it upon mouseup, while also capturing (x, y) coordinates globally to adjust the final cropped image.
Below is the HTML code snippet...
<div class="row">
<div class="col-sm-6">
<canvas #layout1 id="layout1" width="500" height="300"
(mousedown)="mouseDown($event)"
(mouseup)="mouseUp($event)"
(mousemove)="coordinates($event)">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div class="col-sm-6">
<img class="crope-image" src="{{profPic}}" #photo style="width:500px; height:300px;">
</div>
</div>
Furthermore, here is the TypeScript file...
export class FourComponent implements OnInit {
....some code here...
@ViewChild('layout1') canvas;
@ViewChild('photo') photo;
mouseDown(event: MouseEvent): void {
this.rect.startX = event.pageX - this.offsetLeft;
this.rect.startY = event.pageY - this.offsetTop;
this.drag = true;
const _canvas = this.canvas.nativeElement;
this.event = event;
console.log('kkkk');
this.context.strokeStyle = 'black';
this.context.beginPath();
this.context.arc(this.clientX, this.clientY - 130, 50, 0, 2 * Math.PI);
this.context.stroke();
const _photo = this.photo.nativeElement;
_photo.setAttribute('src', _canvas.toDataURL('image/png'));
this.profPic = _canvas.toDataURL('image/png')
}
mouseUp(event: MouseEvent): void {
this.drag = false;
this.event = event;
}
coordinates(event: MouseEvent): void {
this.clientX = event.clientX;
this.clientY = event.clientY;
this.isMouseDown = event.buttons === 1;
}
ngOnInit() {
const _canvas = this.canvas.nativeElement;
const _photo = this.photo.nativeElement;
this.context = (<HTMLCanvasElement>_canvas).getContext('2d');
this.image = new Image();
this.image.src = '../../assets/images/1.jpg'
this.image.onload = () => {
this.context.drawImage(this.image, 0, 0, _canvas.width, _canvas.height);
console.log(this.image.src);
_photo.setAttribute('src', _canvas.toDataURL('image/png'));
this.profPic = _canvas.toDataURL('image/png');
};
console.log(this.clientX + ',' + this.clientY);
}
}
This is my CSS stylesheet...
#layout1{
border:1px solid #d3d3d3;
}
#subcanvas{
border:1px solid #d3d3d3;
}
.crope-image{
border:1px solid #d3d3d3;
}
}
Lastly, here is the current view: https://i.sstatic.net/IVUKC.png
Thank you for your attention...