js使用new Image()创建img对象不生效

我在做vue项目的时候,想获取到图片的宽高,然后把宽高发给后端,代码类似是这样的

 function getFileData(file: File) {
    return new Promise(function (resolve, reject) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (event) {
        resolve(reader.result);
      };
    });
  }
  function getImage(result: string) {
    return new Promise(function (resolve, reject) {
      let img = new Image();
      img.src = result;
      img.onload = function () {
        resolve({
          width: img.width,
          height: img.height
        });
      };
    });
  }

最后发现img怎么也拿不到,找了半天,最后发现,是Image和andv的Image组件重名了。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个问题可能是由于字体文件加载时还未完成,就已经开始绘制文字导致的。你可以尝试在字体文件加载完成后再进行绘制,或者在绘制之前先判断字体文件是否已经加载完成。 你可以修改代码如下: ``` let can = document.createElement('canvas'); can.width = 300; can.height = 350; var str1 = window.xyjVue.$waterStr; let cans = can.getContext('2d'); cans.rotate(-25 * Math.PI / 180); const fontSize = 16; const opacity = 0.4; // 设置字体 const font = new FontFace('CustomFont', 'url(http://hnxyjwork.kmdns.net:15002/wenYi/DIN-Light.woff)'); font.load().then(() => { document.fonts.add(font); // 添加字体 cans.fillStyle = `rgba(216, 216, 216, ${opacity})`; // 设置文本颜色和透明度 cans.font = `${fontSize}px CustomFont`; // 设置字体大小和名称 cans.fillText(str1, 0, 300); cans.fillText(str1, 0, 130); let div = document.createElement('div'); div.id = id; div.style.pointerEvents = 'none'; div.style.top = '0'; div.style.left = '0'; div.style.right = '0'; div.style.bottom = '0'; div.style.opacity = '1'; div.style.position = 'absolute'; div.style.zIndex = 7; div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat fixed'; let img = new Image(); img.src = can.toDataURL('image/png'); img.onload = function () { div.style.background = `url(${img.src}) left top repeat fixed`; if (parentName) { document.querySelector(parentName).appendChild(div); } else { document.body.appendChild(div); } }; }); ``` 这样就可以在字体加载完成后再进行绘制,确保绘制出的文字使用的是正确的字体。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值