Taro 中使用 canvas 绘制分享海报保存到本地

2022-01-27 20:04:01 阅读：339 来源： 互联网

小程序分享朋友圈目前的做法一般都是保存一个带有小程序二维码的海报到本地，网上也有不少相关文章，但是别人的不如自己的，这里记录一下自己生成海报保存到本地的方法。

本来一开始打算使用离屏 canvas 的，结果搞了半天发现小程序的离屏 canvas 和通过 canvas 标签获取的有很多不同，简直就是大坑，最后使用了 canvas 标签，然后定位到很远的地方就行。

二维码设计的圆形，实现也很简单，画一个圆到二维码的位置，然后 clip 一下，再画二维码就行。

  <Canvas
    className={styles.shareCanvas}
    canvasId="share"
    id="share"
    style={{ width: w, height: h }}
  ></Canvas>


// 分享海报长度坐标等定义
// 海报的宽高
const w = 750;
const h = 1232;
// 二维码的边长
const qrCodeSide = 234;
// 二维码圆心位置
const qrCenter = {
  x: 381,
  y: 962
};



  // 保存图片，使用 canvas 绘制
  const saveImg = async () => {
    // 创建canvas对象
    const cxt = Taro.createCanvasContext('share');
    // 绘制背景
    cxt.drawImage(posterImg, 0, 0, w, h);
    // 绘制圆形
    cxt.arc(qrCenter.x, qrCenter.y, qrCodeSide / 2, 0, 2 * Math.PI);
    // 设置裁剪，下面绘制二维码就会裁剪在圆形上
    cxt.clip();
    // 绘制二维码
    cxt.drawImage(qrCode, 264, 845, qrCodeSide, qrCodeSide);
    cxt.draw();
    // 延迟执行才能绘制成功
    setTimeout(() => {
      Taro.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: w,
        canvasId: 'share',
        fileType: 'jpg',
        success(res) {
          setTimeout(() => {
            Taro.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success() {
                showToast('已保存到本地相册');
              }
            });
          }, 300);
        }
      });
    }, 300);
  };

标签：canvas,Taro,海报,二维码,cxt,绘制,const
来源： https://www.cnblogs.com/3body/p/15851091.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Taro 中使用 canvas 绘制分享海报保存到本地