起因：
由于公司項(xiàng)目需要支持 打卡圖片保存到本地功能，所以，需要單獨(dú)截取頁面中的圖片信息，并且保存到本地。（主要我們的應(yīng)用場景在微信上，最后呢在微信上模擬下載完全不行。在電腦上調(diào)試下載圖片是可以的。（求推薦H5下載圖片的方法）長按保存除外哈哈哈）
推薦給：需要獲取頁面內(nèi)容，給頁面截圖的小伙伴
介紹兩個(gè)工具：
html2canvas
官方地址：https://github.com/niklasvh/html2canvas
優(yōu)點(diǎn)：
1.使用人數(shù)多，資料更全
缺點(diǎn)：
1.感覺不怎么維護(hù)更新了
domtoimage
官方地址【github例子很全了】：https://github.com/tsayen/dom-to-image
優(yōu)點(diǎn)
1.有人維護(hù)
2.git活躍，作者發(fā)言
3.使用方便
缺點(diǎn)：
1.新控件，使用人數(shù)少,資料不全
2.IOS手機(jī)不能截圖，污染了canvas.toDataURL會(huì)報(bào)錯(cuò)【目前還沒解決】（參考鏈接：https://github.com/tsayen/dom-to-image/issues/40）
報(bào)錯(cuò)信息如下："SECURITY_ERR: DOM Exception 18: The operation is insecure"
修改dom-to-image.js源碼如下：
//IOS兼容
function toPng(node, options) {
return draw(node, options || {})
.then(function(result) {
try {
// 原來的
var image = result.canvas.toDataURL("image/png", 1.0);
return image;
// 改為svg更清楚
// console.log(result.svg.src);
// return result.svg.src;
} catch (err) {
console.warn(err);
// alert(result.svg.src);
// console.log(result.svg.src);
return "error";
}
});
}
最終方案選擇：
參考了很多資料，最后決定IOS使用html2canvas ，Android使用domtoimage（電腦上調(diào)試）
代碼：
<style lang="less">
</style>
<template>
<div>
<div v-if="isImage">
<img class="background" src="https://ojlf2aayk.qnssl.com/20171110back.png" alt="">
<div class="playCard" v-show="isShow" ref="imageInfo">
<img class="backgroundimg" :src="getData.backgroundImg" alt="">
<div class="contents">
<div class="headimg">
<img :src="getData.headImg" alt="">
</div>
<div class="palycardtime">
<div class="playCardleft">
<div class="playcardtip">{{getData.signTitle}}</div>
<div class="playcardata"><span>{{getData.continuousSign}}</span>{{getData.signUnit}}</div>
<div class="playcartime">{{getData.date}}</div>
</div>
<div class="playCardright">
<div class="qrcode" ref="qrcodes"></div>
<div class="morepeople">{{getData.desc}}</div>
</div>
<div class="downtips">
<img :src="getData.companyLogo" alt="">
<div class="playtips">{{getData.title}}</div>
</div>
</div>
</div>
</div>
</div>
<img :src="image" v-else>
</div>
</template>
<script>
import util from 'util'
import toast from 'toast'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import {
Indicator
} from 'mint-ui'
export default {
data() {
return {
getData: {},
isShow: false,
image: '',
isImage: true
}
},
methods: {
initData() {
Indicator.open('簽到中...')
this.$axios.post('xxx').then((res) => {
if (res.success) {
this.getData = res.data
this.getQrCode()
this.isShow = true
} else {
toast(res.msg)
}
})
},
savaImage() {
let that = this
var opts = {
scale: 2, // 添加的scale 參數(shù)
useCORS: true // 【重要】開啟跨域配置
}
html2canvas(document.getElementById('app'), opts).then((canvas) => {
Indicator.close()
canvas.id = 'canvasId'
document.getElementById('app').appendChild(canvas)
document.getElementById('canvasId').style.display = 'none'
that.isImage = false
that.image = canvas.toDataURL()
})
},
getQrCode() {
var qrcode = new QRCode(this.$refs.qrcodes, {
text: this.getData.qrCodeUrl,
width: 70,
height: 70,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
setTimeout(() => {
this.savaImage()
}, 500)
}
},
mounted() {
this.initData()
}
}
</script>
效果圖：
寫在最后：
domtoimage 和 html2canvas截圖PNG格式，都會(huì)損失部分圖片精度，使圖片變模糊。
如果不是在移動(dòng)端的話，建議使用SVG格式，更為清晰。
兩個(gè)插件個(gè)人更喜歡 domtoimage ~
