使用html2canvas生成图片并下载

3,443 阅读1分钟

js

saveImage() {
    // 先滚动到顶部,否则生成图片存在空白
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;  // 兼容safari老版本
    html2canvas(this.$refs.container).then(
      (canvas: any) => {
        let img = document.createElement('a');
        img.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        img.download = 'pic_name.jpg';
        img.click();
      }
    )
  }

微信h5

微信内置的webview在ios端会屏蔽download自动下载,安卓则提示下载qq浏览器,所以也不能直接保存图片到相册,但是这个功能在手机浏览器和pc浏览器中是完全正常的。

解决方法

只能通过更改交互解决,截图后将图片的base64地址赋值给img的src,并提示用户长按保存。
失败方案参考