vue中的dom結(jié)構(gòu)

<template>
        <div  id="picture">
             <img :src="保存的圖片的路徑" alt="">
        </div>
</template>

js的結(jié)構(gòu)

import html2canvas from 'html2canvas';
export defalut{
    methods:{
        saveImage(){
          const targetDom = document.getElemetById('picture');
          html2canvas (targetDom, {
              width:targetDom.offsetWidth,//畫(huà)布的寬
              height:targetDom.offsetHeight,//畫(huà)布的高
              scale:1,//處理模糊問(wèn)題
              useCORS:true,//開(kāi)啟跨域，這個(gè)是必須的
              //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',//協(xié)議Type值
                'imageData':dataURL//保存圖片的地址
              }
              // 接下來(lái)就是調(diào)用原生的橋方法了 下面展示只是模擬的方法
                AppBridge.callNative(imageData, async (data) => {
                  if(data.result === 1) {
                      // 提示圖片保存成功
                  }else{
                      // 保存失敗
                  }
                })
             })
    }
  }
}

遇到過(guò)的問(wèn)題

1、圖片的偏移問(wèn)題

1.圖片的偏移問(wèn)題
有一個(gè)很重要的問(wèn)題需要提醒一下，當(dāng)你的dom元素沒(méi)有用到絕對(duì)定位或者fixed定位的時(shí)候，不要給元素加上偏移量，這樣有可能會(huì)導(dǎo)致你的圖片發(fā)生偏移。我們?cè)陧?xiàng)目上線的時(shí)候遇到了一個(gè)很郁悶的問(wèn)題，保存的圖片在預(yù)發(fā)和測(cè)試環(huán)境上都沒(méi)有問(wèn)題，但是只要上生產(chǎn)環(huán)境就會(huì)發(fā)生圖片偏移，后來(lái)我們通過(guò)修改，發(fā)現(xiàn)了是這個(gè)定位的問(wèn)題。
2.對(duì) 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標(biāo)簽來(lái)實(shí)現(xiàn)background-image的效果
4.圖片無(wú)法渲染
在img標(biāo)簽內(nèi)加入crossorigin=‘a(chǎn)nonymous’（crossorigin='anonymous’可以觸發(fā)帶跨域請(qǐng)求頭Origin的HTTP請(qǐng)求）并給html2canvas設(shè)置allowTaint: true配置
~~寫(xiě)在結(jié)尾：
目前只是遇到這些問(wèn)題，希望能幫助到大家