关于html2canvas的踩坑记录

最新推荐文章于 2024-12-12 11:03:11 发布

HughesKhu

最新推荐文章于 2024-12-12 11:03:11 发布

阅读量668

点赞数

分类专栏：前端笔记文章标签：小程序 blob canvas html5 javascript

本文链接：https://blog.csdn.net/qq_25227609/article/details/105839620

版权

本文记录了在小程序中利用html2canvas将页面转为海报功能的实现过程，包括如何处理base64图片保存、网络图片跨域与丢失、栈溢出等问题。通过设置html2canvas参数、转换图片格式以及利用小程序API解决实际开发中的挑战。

摘要由CSDN通过智能技术生成

需求背景

最近遇到一个需求，就是将页面数据转成海报的功能。因为是小程序开发，在小程序上实现需求比较麻烦，而且还很容易造成小程序崩溃。于是打算用小程序组件webview内嵌H5的方式实现需求，自然想到了html2canvas这个插件。

解决方案

在H5端使用html2canvas将界面转成canvas，然后保存为base64图片格式，通过小程序JSDK把生成的base64格式的图片作为参数，跳转到小程序内到界面，用小程序组件image展示和保存到系统相册。然而，理想很丰满，现实有点骨感。

功能实现过程中遇到的问题

1、小程序组件image标签虽然能展示图片，但是保存到系统相册成为了一个难点。因为小程序图片预览Api不支持base64格式的图片（虽然在开发工具上效果有），无法使用预览Api的方式保存图片到相册，所以只能找其他方法。最终想到了小程序getFileSystemManager这个Api。

base64src(base64data){
   
  	const fsm = wx.getFileSystemManager();
    const FILE_BASE_NAME = 'tmp_base64src';
    return new Promise((resolve, reject) => {
   
      const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
       if (!format) {
   
           reject(new Error('ERROR_BASE64SRC_PARSE'));

最低0.47元/天解锁文章