In my Angular app I want to resize a picture with a slider.
img: HTMLImageElement
pixelate(selectedActor, value){
if (value === 1) {
this.img = document.getElementById(selectedActor.toString()) as HTMLImageElement;
console.log(this.img)
}
console.log(this.img)
var canvas = <HTMLCanvasElement>document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = this.img.width / value;
canvas.height = this.img.height / value;
ctx.drawImage(this.img, 0, 0, canvas.width, canvas.height);
var target = new Image();
target.src = canvas.toDataURL()
return (target.src)
}
I get value
from a slider:
<mat-slider
class="my-auto"
[disabled]="disabled"
[invert]="invert"
max= 5
min= 1
step= 1
thumbLabel= true
tickInterval= 1
value= "1"
[(ngModel)]="value"
[vertical]=false
(input)="pixelize($event)">Pixelate
</mat-slider>
What I try to do is to always have the same img
value so whenever I resize it, I do do it from the same img
and I can resize it back and forth.
To check if I was always using the same image I console.log it, but each time I change the value
, my img
is diferent. How come since I set its value only once?
question from:
https://stackoverflow.com/questions/65599861/resize-picture-with-a-slider-and-canvas-in-angular 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…