[英]Image change greyscale (Slider) in angular
我正在尝试使用 slider 控件将图像更改为灰度和棕褐色
这是我的 html 代码
<div class="card-body">
<input id="sepia" type="range" oninput="set(this, 'sepia');" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount_sepia">(0)</span><br/>
<input id="grayscale" type="range" oninput="set(this, 'grayscale');" value="0" step="0.1" min="0" max="1"> Grayscale <span id="Amount_grayscale">(0)</span><br/>
</div>
<img class="img-fluid" id="img_prev" src="{{actualImage}}" *ngIf="!this.showCropper" />
<image-cropper id="img_prev" class="imageclass" *ngIf="this.showCropper"
[autoCrop]="false"
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
[resizeToWidth]="256"
[cropperMinWidth]="128"
[onlyScaleDown]="true"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()" style="max-height:500px">
</image-cropper>
这是我的 ts
public set(e,f){
document.getElementById('img_prev').style["filter"] = f+"("+e.value+")";
document.getElementById('Amount_'+f).innerHTML="("+e.value+")";
}
我收到错误
(index):13 Uncaught ReferenceError: set is not defined
at HTMLInputElement.oninput ((index):13)
为什么不使用“角度方式”?
你声明了两个变量
sepia=0;
grayScale=0;
并且只需使用[(ngModel)]
和[style.filter]
<input id="sepia" type="range" [(ngModel)]="sepia"
step="0.1" min="0" max="1"> Sepia
<span id="Amount_sepia">({{sepia}})</span>
<br/>
<input id="grayscale" type="range" [(ngModel)]="grayScale"
step="0.1" min="0" max="1"> Grayscale
<span id="Amount_grayscale">({{grayScale}})</span>
<br/>
<img [style.filter]="'grayscale('+grayScale+') sepia('+sepia+')'"
src="https://picsum.photos/300/300?random=1">
查看简单的堆栈闪电战
在上面的示例中,使用了oninput
属性,它是一个全局事件属性。 这通常与 vanilla js 一起使用,但在 Angular 中有另一种方法可以在 TypeScript 代码中调用 function:事件绑定。
在 Angular 中,没有使用全局事件属性,而是使用 Angular 的事件绑定特性绑定到DOM 事件。
它遵循oninput="set(this, 'sepia');"
应更改为(input)="set(..params..)"
的格式。
然而,一些调整似乎是必要的。 例如,输入绑定中的this
作为参数不起作用,很可能$event
将包含必要的信息。 另一方面,不建议使用document.getElementById
访问本机 DOM 元素,我建议使用ViewChild代替它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.