如何解决使用 Angular 中的滑块和画布调整图片大小
在我的 Angular 应用中,我想用滑块调整图片的大小。
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,canvas.width,canvas.height);
var target = new Image();
target.src = canvas.toDataURL()
return (target.src)
}
我从滑块中得到 value
:
<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>
我试图做的是始终具有相同的 img
值,因此每当我调整它的大小时,我都会从同一个 img
执行它,并且我可以来回调整它的大小。
为了检查我是否总是使用相同的图像,我控制台.记录它,但每次更改 value
时,我的 img
都是不同的。为什么我只设置了一次它的值?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。