美文网首页
canvas 加载图片跨域

canvas 加载图片跨域

作者: 每日需要维生素 | 来源:发表于2021-09-03 11:00 被阅读0次
    // PS:也没用,最后还是让后端设置了允许跨域…………
    //调用
    const createImg = () => {
        const canvas = document.getElementById('canvas');
        canvas.width = 1772;
        canvas.height = 2480;
        const context = canvas.getContext('2d');
        loadImage(imgUrl, (bgImg) => {
          context.drawImage(bgImg, 0, 0, 1772, 2480);
         context.font = "normal bold 64px 'webfont'";
          context.textBaseline = 'top';
          context.fillStyle = '#000000';
          context.textAlign = 'center';
    
          loadImage(imgLink, (qrImg) => {
            context.drawImage(qrImg, 351, 392, 1068, 1068);
          });
        });
      };
    
    //关键(处理图片)
      const loadImage = (url, callback) => {
        var img = new Image();
        img.onload = function () {
          callback(img);
        };
        if (img.complete) {
          img.src = url;
          callback(img);
          return;
        }
        img.setAttribute('crossOrigin', 'anonymous');
        img.crossOrigin = 'Anonymous';
      };
    
    //以上也不管用,最后还是在网站里配置了跨域才解决
    

    相关文章

      网友评论

          本文标题:canvas 加载图片跨域

          本文链接:https://www.haomeiwen.com/subject/kftkwltx.html