Vue3、Vite使用 html2canvas 把Html生成canvas转成图片并保存,以及填坑记录

这两天接到新需求就是生成海报分享,生成的格式虽然是一样的但是自己一点点画显然是不符合我摸鱼人的性格,就找到了html2canvas插件,开始动工。

安装

javascript 复制代码
npm install html2canvas --save

文档

options 的参数都在里面按照自己需求使用
https://allenchinese.github.io/html2canvas-docs-zh-cn/docs/html2canvas-configuration.html

使用

javascript 复制代码
import html2canvas from 'html2canvas'

const shareBox = ref(null) //需要生成canvas的html
const saveImg = () => {
  showLoadingToast({
    duration: 0,
    forbidClick: true,
  });
  html2canvas(shareBox.value, {
    width: shareBox.value.offsetWidth,
    // height: shareBox.value.offsetHeight,
    scale: 2
  }).then(function (canvas) {
    canvas.toBlob((blob) => {
      if (blob) {
      	//这个是下载blob文件的方法
        downloadByBinary(blob, +new Date(), "image/png")
        showToast('保存成功!')
      } else {
        showToast('保存失败,请稍后重试!')
      }
    });
  })
}

填坑记录踩了一路 (我是做移动端H5 如果是pc 后面的坑可能遇不到)

填坑一

ios、微信环境用下载blob的方式不行 有拦截不支持下载。找个了优化的方案就是把图片放大预览让用户自己长按保存

javascript 复制代码
const saveImg = () => {
  showLoadingToast({ //vant 的loding
    duration: 0,
    forbidClick: true,
  });
  html2canvas(shareBox.value, {
    width: shareBox.value.offsetWidth,
    // height: shareBox.value.offsetHeight,
    scale: 2
  }).then(function (canvas) {
    // 因为 移动端ios,微信环境 限制了自动下载所以生成预览图片用户自己长按保存
    // canvas.toBlob((blob) => {
    //   if (blob) {
    //     downloadByBinary(blob, +new Date(), "image/png")
    //     showToast('保存成功!')
    //   } else {
    //     showToast('保存失败,请稍后重试!')
    //   }
    // });
    const url = canvas.toDataURL("image/png")
    if (url) {
      closeToast() //vant 的loding
      showImagePreview([url])
      nextTick(() => {
        showToast('已为您生成图片,请长按保存!')
      })
    } else {
      closeToast() //vant 的loding
      nextTick(() => {
        showToast('保存失败,请稍后重试!')
      })
    }
  }).catch(res => {
    closeToast()
    nextTick(() => {
      showToast(res)
    })
  });
}

测试了一下 真不戳 然后新的问题出来了

填坑二 html2canvas 在IOS系统13.4以上失效

看到ios上迟迟不出来预览 也不走 then和catch方法 推测是插件本身除了问题 就开始百度

这个解决方案有两种一种是降版本
https://github.com/niklasvh/html2canvas/issues/2229

javascript 复制代码
// 移除项目本身的插件
npm uninstall html2canvas

// 下载新的 (注意还需要把package.json版本号的"^"或者"~"删掉。直接写1.0.0-rc.4。锁版本才行)
npm install --save html2canvas@1.0.0-rc.4

另一个方法还是使用新版的rc.5版本 有大佬把堵塞的地方改好了
https://github.com/FEA-Dven/html2Canvas/blob/master/README.md

上面那个方法可以不过我更喜欢用新版没办法就是喜欢新的东西

然后我就把上面的插件引入进来了(我用的是vite构建工具 )再导入的时候报错说没有这个方法的导出,我一看嗐:咱不如大佬直接改堵塞的地方咱能写个简单的小导出啊~~

就是红框里的写个默认导出

javascript 复制代码
//页面上使用
import html2canvas from "../lib/html2canvas.js";

// 这里就截个方法的使用的 下面就跟上面填坑一 一样
(window.html2canvas || html2canvas)(shareBox.value, {
   width: shareBox.value.offsetWidth,
   // height: shareBox.value.offsetHeight,
   scale: 2
 })

然后大功告成、热泪盈眶、又混一天

相关推荐
祈祷苍天赐我java之术2 分钟前
CSS 进阶用法
前端·css
2501_915106323 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
柯南二号4 小时前
【大前端】React Native 调用 Android、iOS 原生能力封装
android·前端·react native
睡美人的小仙女1275 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh5 小时前
React Native 初体验
前端·react native·react.js
大宝贱6 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
程序视点6 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点7 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
小只笨笨狗~8 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_490354348 小时前
Vue设计与实现
前端·javascript·vue.js