Question

我试图提供一种功能，在将一个链接粘贴到一个输入中之后，检查该链接的图像的宽度和高度是否超过1000，并且格式为JPG。

我尝试这样做：

HTML：

<input (change)="verificaImagemValida(1, produto.foto_prin_1)" [(ngModel)]="produto.foto_prin_1" required type="text" name="foto_prin_1" id="foto_prin_1" class="form-control">

TS：

img = new Image();

verificaImagemValida(fotoAlvo: number, linkAlvo: string){

    console.log(linkAlvo);

    this.img.src = linkAlvo;

        if(this.img.width < 1000 || this.img.height < 1000 || !this.img.src.match(/jpg/)){
          this.toastrService.showToast(false,"Ops, temos um problema", "Imagem "+fotoAlvo+" deve ter 1000x1000px no formato JPG!");
          if(fotoAlvo == 1){
            this.produto.foto_prin_1 = null;
          }
        }

我第一次粘贴宽度为e高度大于1000且jpg的图像的链接时，该函数显示showToast函数，因为img.width和img.height的值为0。当我尝试粘贴相同的值时输入中的链接，即可正常运行。为什么错了？

Answer 1

您的问题是您要获取空白图像的宽度。

执行this.img.src = linkAlvo后，图像开始加载，但需要一段时间。

您必须等待图像加载以验证其尺寸。图片元素有一个load事件

img.onload = () => {
    if(this.img.width < 1000){
        ....
    }
}

因此您的代码应类似于：

img = new Image();

verificaImagemValida(fotoAlvo: number, linkAlvo: string){

    img.onload = () => {

        if(this.img.width < 1000 || this.img.height < 1000 || !this.img.src.match(/jpg/)){
          this.toastrService.showToast(false,"Ops, temos um problema", "Imagem "+fotoAlvo+" deve ter 1000x1000px no formato JPG!");
          if(fotoAlvo == 1){
            this.produto.foto_prin_1 = null;
          }
        }

    }

    this.img.src = linkAlvo;

}

应该在图片网址之前设置加载事件，这样，在定义该事件之前，不要错过加载事件，以防万一它发生得非常快。

我无法测试此代码段，因此可能会有一些变化，但这是您缺少的主要部分。

我如何检查图像链接的宽度和高度是否大于1000

1 个答案: