html2canvas的使用

vue中的dom结构

js的结构

import html2canvas from 'html2canvas';
export defalut{
    methods:{
        saveImage(){
          const targetDom = document.getElemetById('picture');
          html2canvas (targetDom, {
              width:targetDom.offsetWidth,//画布的宽
              height:targetDom.offsetHeight,//画布的高
              scale:1,//处理模糊问题
              useCORS:true,//开启跨域，这个是必须的
              //scrollX:0,//图片x轴的位置
              //scrollY:0,//图片Y轴的位置
              //x:0,//x轴的偏移量
              //Y:0//Y轴的便宜量
          }).then(canvas => {
              let dataURL = canvans.toDataURL('image/png');
              dataURL = dataURL.replace('data:image/png;base64,', '')
              var saveImageData = {
                'type':'61',//协议Type值
                'imageData':dataURL//保存图片的地址
              }
              // 接下来就是调用原生的桥方法了 下面展示只是模拟的方法
                AppBridge.callNative(imageData, async (data) => {
                  if(data.result === 1) {
                      // 提示图片保存成功
                  }else{
                      // 保存失败
                  }
                })
             })
    }
  }
}

遇到过的问题

1、图片的偏移问题

1.图片的偏移问题
有一个很重要的问题需要提醒一下，当你的dom元素没有用到绝对定位或者fixed定位的时候，不要给元素加上偏移量，这样有可能会导致你的图片发生偏移。我们在项目上线的时候遇到了一个很郁闷的问题，保存的图片在预发和测试环境上都没有问题，但是只要上生产环境就会发生图片偏移，后来我们通过修改，发现了是这个定位的问题。
2.对 css3 支持不好
html2canvas 暂不支持的 CSS 样式属性:

background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform
3.背景图片模糊
解决方案：使用img标签来实现background-image的效果
4.图片无法渲染
在img标签内加入crossorigin=‘anonymous’（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）并给html2canvas设置allowTaint: true配置
~~写在结尾：
目前只是遇到这些问题，希望能帮助到大家