前端利用Canvas实现生成图片、图片裁剪、图片组合功能简述

生成图片

利用html2Canvas生成图片，已经没有什么稀奇的了，额外提一点的是若想保证该插件在ios13上功能正常的话，建议使用 1.0.0-rc.4这个版本。但是该版本没有提供dpi字段以提高图片的清晰度，希望后续版本会有优化吧。 不过即便没有dpi字段我们还是有办法处理：

 const canvas = document.createElement('canvas');
 // canvas 宽高为你想绘制的dom节点的宽高 * 设备像素比
 canvas.width = width * window.devicePixelRatio;
 canvas.height = height * window.devicePixelRatio;
 canvas.style.width = `${width}px`;
 canvas.style.height = `${height}px`;
 const context = canvas.getContext('2d');
 // 画笔缩放倍数为设备像素比
 context.scale(window.devicePixelRatio, window.devicePixelRatio);
 html2canvas(dom, {canvas}).then((res) => {
     console.log(res.toDataURL())
  })

图片裁剪

图片裁剪在生成的时候处理

 <div className={styles.fu} ref={canvas}>
    <img className={styles.zi} src={WorksImg} alt="" />
 </div>

通过控制fu组件的宽高，以及图片在父组件的显示位置就可以在生成新图片的时候，随意裁剪图片。

图片组合

把多张图片拼成一张新图片,利用CanvasRenderingContext2D.drawImage()可以把图片绘制到canvas（2d）画布的不同坐标（位置），同时可以设置图片的宽度。