关于前端:带你实现用canavs画海报并且下载

分享海报的性能目前比拟常见，尤其是电商公司，在实习期间接到了一个实现海报绘制并且下载的需要，于是开始入手开发，接下来带大家说一下具体思路：

1. 封装罕用的 canavs API，不便复用
beginPath();
moveTo();
arc();
lineTo();
closePath();
clip();
stroke();
fill();

这里列举了一些常见的 API，具体参数能够参考官网文档
上面是罕用办法封装

// 设置字体款式
function setStyle(_ctx, font, color, textAlign, textBaseline) {
  textAlign = textAlign || "left";
  textBaseline = textBaseline || "middle";
  _ctx.font = font;
  _ctx.fillStyle = color;
  _ctx.textAlign = textAlign;
  _ctx.textBaseline = textBaseline;
}

// 图片绘制办法
function drawImg(_ctx, img, x, y, w, h) {if (!img) return;
  _ctx.drawImage(img, x, y, w, h);
}
// 头像圆角绘制
function drawImgRadius(_ctx, img, x, y, w, h, r) {_ctx.save();
  _ctx.beginPath();
  _ctx.moveTo(x + r, y);
  _ctx.arc(x + r, y + r, r, 1.5 * MATH_PI, 1 * MATH_PI, true);
  _ctx.lineTo(x, y + h - r);
  _ctx.arc(x + r, y + h - r, r, 1 * MATH_PI, 0.5 * MATH_PI, true);
  _ctx.lineTo(x + w - r, y + h);
  _ctx.arc(x + w - r, y + h - r, r, 0.5 * MATH_PI, 0 * MATH_PI, true);
  _ctx.lineTo(x + w, y + r);
  _ctx.arc(x + w - r, y + r, r, 0 * MATH_PI, 1.5 * MATH_PI, true);
  _ctx.closePath();
  _ctx.clip();
  drawImg(_ctx, img, x, y, w, h);
  _ctx.restore();}

2. 图片的预处理（收集海报中须要应用的图片）
能够定一个对象用来收集图片

function prePainting(args1,args2,args3) {
  let imgObj = {
    bg: args1,
    logo: args2,
    qrcode: args3,
  };
  return imgObj;
}

复制代码
3. 图片的预加载（加载 canavs 中应用的图片）
这里用 promise 解决图片加载过程，

function preLoadImgs(imgs) {let keysArr = Object.keys(imgs);
  let promiseArr = keysArr.map(key => {
    return new Promise(resolve => {let _img = new Image();
      _img.crossOrigin = "anonymous";
      _img.onload = () => {
        resolve({[key]: _img,
        });
      };
      _img.onerror = () => {
        resolve({[key]: null,
        });
      };
      _img.src = imgs[key];
    });
  });

  return Promise.all(promiseArr).then(resArr => {return resArr.reduce((accumulator, currentValue) => {return Object.assign({}, accumulator, currentValue);
    }, {});
  });
}

复制代码
4. 进行海报的绘制
去调用实现画图的具体实现的办法，绘制胜利后调用 toDataURL()，用于将 canvas 对象转换为 base64 位编码。
5. 实现海报的下载性能
通过 a 的 download 属性进行图片下载

function doDownLink(imgCanvas) {
  // 创立暗藏的可下载链接
  const a = document.createElement('a') // 创立一个 a 标签
  a.href = imgCanvas; // a 标签的 src 属性赋值
  a.download = '.jpg';
  // 触发点击
  document.body.appendChild(a);
  a.click();
  // 而后移除
  document.body.removeChild(a);
}