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,//畫布的寬
height:targetDom.offsetHeight,//畫布的高
scale:1,//處理模糊問題
useCORS:true,//開啟跨域滤淳，這個(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//保存圖片的地址
}
// 接下來就是調(diào)用原生的橋方法了 下面展示只是模擬的方法
AppBridge.callNative(imageData, async (data) => {
if(data.result === 1) {
// 提示圖片保存成功
}else{
// 保存失敗
}
})
})
}
}
}
遇到過的問題
1饵溅、圖片的偏移問題
1.圖片的偏移問題
有一個(gè)很重要的問題需要提醒一下蚓哩，當(dāng)你的dom元素沒有用到絕對(duì)定位或者fixed定位的時(shí)候，不要給元素加上偏移量，這樣有可能會(huì)導(dǎo)致你的圖片發(fā)生偏移苹熏。我們?cè)陧?xiàng)目上線的時(shí)候遇到了一個(gè)很郁悶的問題呻畸，保存的圖片在預(yù)發(fā)和測(cè)試環(huán)境上都沒有問題移盆，但是只要上生產(chǎn)環(huán)境就會(huì)發(fā)生圖片偏移，后來我們通過修改伤为，發(fā)現(xiàn)了是這個(gè)定位的問題咒循。
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)簽來實(shí)現(xiàn)background-image的效果
4.圖片無法渲染
在img標(biāo)簽內(nèi)加入crossorigin=‘a(chǎn)nonymous’（crossorigin='anonymous’可以觸發(fā)帶跨域請(qǐng)求頭Origin的HTTP請(qǐng)求）并給html2canvas設(shè)置allowTaint: true配置
~~寫在結(jié)尾：
目前只是遇到這些問題，希望能幫助到大家
