想在uniapp移动端生成并下载自定义海报？这篇文章告诉你该怎么做！

2023-07-10 07:45:23

利用uniapp实现移动端海报生成与下载

一、海报生成

海报生成的原理是将所需元素绘制到画布上，形成图片。在uniapp中，可借助html2canvas库实现这一过程。

import html2canvas from 'html2canvas';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

html2canvas(document.getElementById('poster')).then((canvas) => {
  // 处理画布，如添加滤镜
  const base64 = canvas.toDataURL('image/png');

  // 保存海报到相册
  wx.saveImageToPhotosAlbum({
    filePath: base64,
    success: () => {
      wx.showToast({
        title: '海报已保存',
        icon: 'success',
        duration: 2000
      });
    },
    fail: () => {
      wx.showToast({
        title: '保存失败',
        icon: 'none',
        duration: 2000
      });
    }
  });
});

二、遇到的坑

1. canvas跨域

跨域图片无法通过drawImage加载，需将其转换为base64编码。

const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  // 后续步骤
};
img.src = 'http://example.com/image.png';

2. renderjs事件不触发

renderjs事件需使用其特殊处理方式。

renderjs.on('click', '.poster-item', (e) => {
  // 执行操作
});

3. 下载海报

利用wx.saveImageToPhotosAlbum方法保存海报到相册。

wx.saveImageToPhotosAlbum({
  filePath: base64,
  success: () => {
    wx.showToast({
      title: '海报已保存',
      icon: 'success',
      duration: 2000
    });
  },
  fail: () => {
    wx.showToast({
      title: '保存失败',
      icon: 'none',
      duration: 2000
    });
  }
});