vue中使用html2canvas将html生成图片

html2canvas？

html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。
下面将简述html内容（其中也包含了二维码生成到图片上）生成图片过程以及遇到过的一些问题

在vue里使用html2canvas

安装

npm install html2canvas  -d

引入

import html2canvas from 'html2canvas';

布局

  
   
   

       

          
       
       
{{hero.title}}
{{hero.str1}}
       

             
              

        
  
     
 
 

    
    
 

其中QRCode是生成二维码用到的JavaScript 库，html2canvas转需要生成图片的html内容为图片

其中遇到的问题
1、ios无法转成为图片
原因：
图片不能设置成background显示，需要使用img（如：刚开始设置在了background，ios则无法生成为图片）导致无法实现图片保存
2、数据还未渲染到html里面就先转为了图片，导致生成的图片没有内容
解决：
使用this.$nextTick(()=> {
//html2canvas转换内容
})