JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真，保存不完整的解决办法

前言

最近因为工作需求，需要前端根据后端传过来的链接生成二维码，并且要使用JS保存页面为图片。然后网上搜了很多解决办法。最终都是用h5的canvas进行绘制然后保存为图片。其中，又以html2Canvas最为出众。当然在此之前要先用qrcodejs2生成二维码，然后调用file-saver保存。相关sdk自己点进去研究，下面我就来讲讲我的实现思路。

注意：因为项目是由vue2写的，这里以vue2的写法进行演示。

一、生成二维码

1、安装qrcodejs2

npm install qrcodes2 --save

2、编写代码

2.1 布局

<!--将下面那个canvas绘制的二维码转换为base64后塞到img元素里面 可以支持长按另存为图片-->
<img v-if="showQRImage" :src="qrImage" class="qr">
<!--根据canvas直接绘制的二维码 无法长按另存为图片-->
<div v-else ref="qr" class="qr" />

如果只是展示，只需要下面那个div即可。如果想要长按另存为图片，就要写成上面那个样子。二者的class样式要保持一致，这样可以达到用户无感知替换。

2.2 JS脚本

import QRCode from 'qrcodejs2'

// 生成的二维码的宽高
const qr_width = 150
const qr_height = 150

export default {
  data() {
    return {
      qrImage: '',
      showQRImage: false
    }
  },
  computed: {
    // 获取前一个页面传过来的qr链接 自己根据实际情况修改获取方式
    qrURL() {
      return this.$route.query.entranceUrl || ''
    }
  },
  created() {
    // 建议放在created里面进行二维码生成
    this.generateQRCode()
  },
  methods: {
    generateQRCode() {
      // 确保dom渲染完组件后再调用生成方法 否则可能不能生成二维码
      this.$nextTick(() => {
        new QRCode(this.$refs.qr, {
          text: this.qrURL, // 页面地址 ,如果页面需要参数传递请注意哈希模式#
          width: qr_width,
          height: qr_height,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
        this.saveQRCode()
      })
    },
    saveQRCode() {
      html2canvas(this.$refs.qr, {
        backgroundColor: null, // 透明背景
        width: qr_width,
        height: qr_height,
        useCORS: true // 解决跨域保存图片的问题
      }).then(canvas => {
        this.qrImage = canvas.toDataURL('image/jpeg') // 转换保存二维码图片为Base64字符
        this.showQRImage = true
      })
    }
  }
}

需要注意的是，将URL转换为二维码的URL里面不要带中文。如果有，请先转码。

然后自己可以写一个按钮，给它设置点击事件为saveQRCode即可。

二、保存页面为图片

1、安装html2Canvas

npm install html2Canvas --save

2、安装file-saver

npm install file-saver --save

3、代码编写

import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'

savePage() {
   html2canvas(this.$refs.qrContainer, {
       useCORS: true, // 解决跨域保存图片的问题
     }).then(canvas => {
       // 将canvas内容保存为文件并下载
       canvas.toBlob((blob) => {
       saveAs(blob, 'xxxxx二维码.png')
     })
 })
}

this.$refs.qrContainer是vue的写法，指代具体的dom节点。当然你也可以用document.getElementById取代。

上面的就是主代码。将savePage方法绑定在一个按钮的点击事件后，点击时，浏览器会提示下载图片。

但是问题很多。

3.1 如果当前页面中有一个保存图片的按钮，但是保存的时候不要想要这个按钮，该怎么办？

按照vue的思路，肯定给这个按钮设置一个v-if="showButton"的配置，保存的时候showButton=false，保存完后showButton=true。

想法很美好，实际很残酷，最终你失败了。

我们仔细阅读html2Canvas的api，会发现有一个ignoreElements的配置属性。这个配置，就是用来忽略不需要转换为canvas的dom元素的。那么，这个代码就应该这样写:

import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'

savePage() {
   html2canvas(this.$refs.qrContainer, {
       useCORS: true, // 解决跨域保存图片的问题
       ignoreElements: (item) => {
            // 这个save就是你给需要忽略的元素设置class的名字
            if (item.classList.contains('save')) {
              return true // 排除掉保存二维码按钮
            }
            return false // 保留这个元素
          }
     }).then(canvas => {
       // 将canvas内容保存为文件并下载
       canvas.toBlob((blob) => {
       saveAs(blob, 'xxxxx二维码.png')
     })
 })
}

3.2 保存的图片不完整

如果你需要转换为图片的布局有padding或者margin之类的设置。那么在调用html2Canvas生成的canvas是不会包含这部分值的。也就意味着你的图片顶部和底部如果有间距值，那实际就是直接贴屏的。解决的方式，就是在顶部和底部设置空的视图进行占位。

<!--父布局-->
<div id="container">
    <!--保存图片的时候防止贴顶-->
    <div style="height: 20pt;width: 100%" />
    <!--真正的内容区域-->
    <div class="content"></div>
    <!--保存图片的时候贴底-->
    <div style="height: 60pt;width: 100%" />
</div>

 此外，如果你的页面超过了屏幕高度，能滑动，那么这时，你看到保存的图片可能也是残缺的。html2Canvas默认保存的是可见的区域，超出屏幕部分无法保存。

网上流传一种办法：

在调用savePge之前，调用

window.pageYoffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0

意思就是让屏幕滚回至最初状态。这。。。。。实际上就是掩耳盗铃，没啥卵用。

最终解决办法就是手动设置canvas的绘制宽高，将其设置为实际内容的宽高，并且设置缩放。

import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'

savePage() {
   html2canvas(this.$refs.qrContainer, {
       useCORS: true, // 解决跨域保存图片的问题
       scale: 1, 
       height: this.$refs.qrContainer.scrollHeight,
       windowHeight: this.$refs.qrContainer.scrollHeight,
       ignoreElements: (item) => {
            // 这个save就是你给需要忽略的元素设置class的名字
            if (item.classList.contains('save')) {
              return true // 排除掉保存二维码按钮
            }
            return false // 保留这个元素
          }
     }).then(canvas => {
       // 将canvas内容保存为文件并下载
       canvas.toBlob((blob) => {
       saveAs(blob, 'xxxxx二维码.png')
     })
 })
}

这里的this.$refs.qrContainer.scrollHeight你也可以用document.getElementById('xxx').scrollHeight代替。另外，scale是一定要设置的，否则还是会出现残缺。

3.3 图片失真了

按照上面的写法，在手机上保存的时候，图片会失真。最终测试的解决办法就是改scale,从1改到3就能解决问题。