美文网首页
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