canvas生成图片并解决跨域问题

canvas生成base64长按保存图片

在日常项目中我们经常会遇到各种个样的保存图片功能，需要运用canvas进行绘图，生成img可以识别的url进行长按保存。

canvas生成代码

    // canvas生成图片
    generateImg() {
      let that = this;
      // 创建画布
      var canvas = document.createElement("canvas");
      // 绘制文字环境
      var context = canvas.getContext("2d");
      //设置画布倍数
      var getPixelRatio = function(context) {
        var backingStore =
          context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio ||
          1;
        return (window.devicePixelRatio || 1) / backingStore;
      };
      var scal = getPixelRatio(context);
      // 画布宽度
      canvas.width = 750 * scal;
      // 画布高度
      canvas.height = 1463 * scal;
      //设置倍数
      //清除canvas原有内容
      context.rect(0, 0, canvas.width, canvas.height);
      //设置昵称内容
      var nickeName ="111111";
      var headImgSrc = "https://friso-source.d-energy.cn/friso_campaign_202005/img/headImg.png";
      // 设置字体
      context.font = 28 * scal + "px bold";
      // 设置字体颜色
      context.fillStyle = "#172b5e";
      // 获取字体宽度
      var textWidth = context.measureText(this.userId).width;
      //设置海报底图
      var model = new Image();
      model.crossOrigin = "Anonymous";

      this.toDataURL("https://friso-source.d-energy.cn/friso_campaign_202005/img/result1.jpg", function(dataUrl) {
        model.src = dataUrl;
      });

      //加载底图并渲染到画布
      model.onload = function() {
        context.drawImage(model, 0, 0, canvas.width, canvas.height);
        var canvasCircle = document.createElement("canvas");
        var ctx2 = canvasCircle.getContext("2d");
        canvasCircle.width = 188;
        canvasCircle.height = 188;
        //设置文案并渲染到画布
        var headImg = new Image();
        that.toDataURL(headImgSrc, function(dataUrl) {
          headImg.src = dataUrl;
        });
        headImg.crossOrigin = "Anonymous";
        context.fillText(
          that.userId,
          (canvas.width - textWidth) / 2,
          500 * scal
        );
        headImg.onload = function() {
          var circle = {
            x: canvasCircle.width / 2,
            y: canvasCircle.height / 2,
            r: canvasCircle.width / 2
          };
          ctx2.clearRect(0, 0, canvasCircle.width, canvasCircle.height);
          //开始路径画圆,剪切处理
          ctx2.save();
          ctx2.beginPath();
          ctx2.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
          ctx2.clip(); //剪切路径
          ctx2.drawImage(
            headImg,
            0,
            0,
            (188 / scal) * scal,
            (188 / scal) * scal
          );
          //恢复状态
          ctx2.restore();
          var headBase64 = canvasCircle.toDataURL("image/png");
          var NewheadImg = new Image();
          NewheadImg.src = headBase64;
          NewheadImg.crossOrigin = "Anonymous";
          NewheadImg.onload = function() {
            context.drawImage(
              NewheadImg,
              (840 / 3) * scal,
              (750 / 3) * scal,
              190 * scal,
              190 * scal
            );
            //二维码
            var checkma = new Image();
            that.toDataURL("https://friso-source.d-energy.cn/friso_campaign_202005/img/checkma.png", function(dataUrl) {
              checkma.src = dataUrl;
            });
            checkma.crossOrigin = "Anonymous";
            checkma.onload = function() {
              context.drawImage(
                checkma,
                (925 / 3) * scal,
                (3500 / 3) * scal,
                140 * scal,
                140 * scal
              );
              var base64 = canvas.toDataURL("image/png");
              // console.log('base64========',base64)
              $(".saveimg").attr("src", base64);
            };
          };
        };
      };
    },

那么问题来了，canvas往往会遇到跨域的问题（可以将url转换为blob格式）。base64过大如果直接onload的话会有问题，所以建议转为blob，如果存储数据库话，也尽量转换为blob格式。

    toDataURL(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
          callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
      };
      xhr.open("GET", url);
      xhr.responseType = "blob";
      xhr.send();
    },

End
希望可以帮助到大家！！