<div class="mpback"
ref="card1">
</div>
在这个区域内的代码生成图片
let cardref = eval('this.$refs.card1')
this.$nextTick(() => {
makeImg(cardref).then(res => {
this.shareimg = res
this.showCardPoster = true
})
})
调用相关方法生成图片,并将图片给shareimg
res为最后生成的图片
export function makeImg (data) {
var url = ''
return new Promise((resolve, reject) => {
const opts = {
useCORS: true,
trainttest: true,
allowTaint: false,
scale: 4
}
html2canvas(data, opts).then(function (canvas) {
// url = canvas.toDataURL('image/jpeg', 0.5)
url = canvas.toDataURL('image/png');
resolve(url)
})
})
}
调用插件来生成图片
但是遇到问题
1 iOS无法生成
2 图片清晰度不高
3.图片生成有白边的情况
明日解决
解决第二个问题
在需要生成图片的html代码内,能使用img尽量用img,不要用background-images。
并且给img加上 – crossOrigin="anonymous"
–这个属性,会让图片变的清晰度极高,使用background-images的应该也可以解决,
第一个问题,一般都是苹果X出现问题,这个问题基本就是和版本有关,我的项目使用的版本是5,但是只有稳定版的4,苹果生成是可以的。
解决方法
https://blog.csdn.net/qq_41913971/article/details/107353958
参考这个,完美
第三个问题,简单来解决,可以更改生成图片时的高度和宽度,在一定程度上可以解决这个问题,但是根本上解决可以给加个属性,让其生成的图片变成透明, 可以完美解决这个问题。
const opts = {
height: shareContent.offsetHeight, // 下面解决当页面滚动之后生成图片出现白边问题
width: shareContent.offsetWidth,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
useCORS: true,
tainttest: true,
allowTaint: false,
scale: 4,
backgroundColor: "transparent" //这个属性
}