安装
cnpm install --save html2canvas@1.0.0-rc.4
开发时候发现html2canvas在IOS13.4以上发现问题,实现不了,发现网友说要降低版本到@1.0.0-rc.4,所以安装@1.0.0-rc.4版本实现发现可行
html:
<div class="certificate" id="html2canvas" @click="createdImg">
<div class="certificate-message">
<img ref="showImg" class="workerDetail-headImg l-vMiddle" :src="showImg" backupSrc="user"></img>
<span class="workerDetail-name">{{detail.name}}</span>
</div>
<img class="certificate-bg" src="@/assets/volunteer/worker/certificate.jpg" alt="">
</div>
js:
import html2canvas from 'html2canvas' // 引入html2canvas
import { ImagePreview } from 'vant' // 引入vant的图片预览组件 ImagePreview
data () {
return {
showImg: '****'
}
},
methods: {
createdImg () {
this.getBase64Image() // 图片转为base64再去生成图片
.then(res => {
setTimeout(() => {
html2canvas(
document.getElementById('html2canvas'),
{
useCORS: true // 允许加载跨域的图片
}
).then((canvas) => {
const src = canvas.toDataURL() // 导出图片
ImagePreview([src])
})
.catch(error => {
console.log(error, 'error')
})
}, 0)
})
},
getBase64Image (url) {
const _this = this
// 将图片转为base64
return new Promise((resolve, reject) => {
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous') // 跨域
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png')
_this.showImg = url
resolve()
}
const timestamp = Date.parse(new Date())
image.src = _this.$options.data().showImg + '?t=' + timestamp // 加上时间戳防止缓存/跨域
})
}
}