canvas签字+html2canvas将dom保存为图片避坑指南

1. 前言

如果你需要h5签字，并需要将相关dom保存成图片，那你算是 掏上了😂 这是一篇全方位避坑指南。至少可以给你节省 8小时。

技术栈： vue2.x js 一定要先看技术栈哦，避免出现未知ERROR

canvas 签字自己去实现其实也没啥难度，有更好的插件，可以帮助我们多争取一点摸鱼时间，那何尝不可呐。

之前也写过一篇小程序签字保存图片，您可以点击查看👉👉👉 微信小程序 canvas 签字连笔卡顿如何解决

2. 使用的插件

js 复制代码

npm i  html2canvas@1.3.2
npm i  vue-esign@1.1.4

说到这，我不得不夸一下 vue-esign 好用、非常好用👍 ，我需要的功能都做了配置，你们可以感受下demo，看看是不是符合你的需求再决定是否向下看，点击查看

3. 签字组件的使用

js 复制代码

 <vue-esign 
     ref="esign" 
     class="mySign" 
     :height="300" 
     :isCrop="isCrop" 
     :lineWidth="lineWidth" 
     :lineColor="lineColor" 
     :bgColor="bgColor" 
     :isClearBgColor="false"
 />
// 重置事件
handleReset() {
    this.$refs.esign.reset()
}
// 校验是否签字
openLink() {
    try {
        // 生成签名结果
        const res = await this.$refs.esign.generate()
        console.log('res')
        // 处理其他业务逻辑
     }catch (error) {
        console.log('err', error)
        Toast('请先签名')
    }
}

简单吧，他把签字的动作都封装了，代码看着非常清爽。感谢大佬，如果你需要看其它的配置请看这个

ok到这 canvas签字就结束了，非常好用，接下来就说说 html2canvas将dom保存为图片的坑

4. html2canvas的使用

js 复制代码

 <div class="confirm_content_clone" ref="htmlContent">
      <img style="width: 100%; height: 100%;"  :src="filePath" alt="" />
      <img style="width: 100%; height: 150px;" :src="resultImg" alt="" />
 </div>
 
 async openLink() { 
     // 别问直接把这些属性，放上
     const newCanvas = await html2canvas(this.$refs.htmlContent, {
        useCORS: true, // 处理跨域资源
        scale: 2, // 提高截图清晰度
        allowTaint: true,
        scale: 2, //按比例增加分辨率 (2=双倍).
        dpi: window.devicePixelRatio * 2, //设备像素
    })
    const imgData = newCanvas.toDataURL('image/png')
}

正常情况，那就是把类名为 confirm_content_clone的div 里面的两个图片，生成同一个拼接图片，不正常情况， 那恭喜你，我们开始走上了填坑之路

5. 坑one

图片不全，如下图所示

其实这里并没有太为难我，我的处理方式是：页面展示是正常一套逻辑，需要生成的图片dom，我采用绝对定位，使用 top：10000 让其消失在可视范围内，野蛮是野蛮了一点，毕竟我和代码有一个能跑就行

在以为解决的时候（开心鼓掌），你不知道的是，第二个坑向你迎面走来，在ios系统中，图片空白

6. 坑Two

第一个img 的src是一个图片url，第二个src 图片是 base64格式，在ios系统中截图如下图所示

也就是图片是url不是base64 在ios系统中无法显示，这个比较坑的是，pc浏览器中正常显示，也就是开发的时候好好的，为啥到了你那就不行了，是不是你手机有问题 🤣

必坑指南第二式: 敲黑板，认真看，要不然够你找的 crossOrigin="anonymous"

js 复制代码

// 添加  crossOrigin="anonymous" 
 <img  
     crossOrigin="anonymous" 
     style="width: 100%; height: 100%;" 
     src=""
     alt=""
 />

看，只要抵住最黑的暗，就能收获最光的亮

6. 坑Three

这个坑的现象是在ios系统的，涉及中文符号的时候，保存的图片换行错乱，而且莫名其妙靠右：如下图所示

其实这个解决方案已经在上面了，就是在浏览中，样式是正确的如下图所示

终极一招： 先生成一张正确的图片，然后用图片替代文字，即可。是不是脑回路清奇，好了就这吧。

**野蛮的人生不需要解释，下次见。 **