当前位置： 移动技术网 > IT编程>网页制作>HTML > html2canvas生成海报的各种问题

html2canvas生成海报的各种问题

2020年07月17日  | 移动技术网IT编程  | 我要评论

基础写法

<div @click="handlePoster()" class="btn">生成海报</div>
<div id="weeklyPoster" ref="weeklyPoster" class="poster">
	<h1>poster content</h1>
	<img class="poster__logo" src="./assets/img/share-logo.png" alt="" crossOrigin="anonymous">
</div>
<div v-if="sharePoster.show" class="poster__save">
	<img class="poster__logo" :src="sharePoster.url" alt="">
</div>

data () {
	return {
		sharePoster: { // 海报内容
        	show: false,
            url: '',
            height: 0,
            width: 0
     	},
	}
}
methods: {
	handlePoster() {
            this.getWeeklyWxCode(()=>{ // 向获取二维码接口发起请求
                if(!this.sharePoster.url) { // 第一次生成海报
                   // 提示海报生成中...
                    this.$nextTick(() => {
                        setTimeout(()=>{
                            html2canvas(document.querySelector('#weeklyPoster'), {
                                scrollX: 0,
                                scrollY: 0,
                                allowTaint: true,
                                useCORS: true,
                                backgroundColor: null // 解决生成的图片有白边
                            }).then((canvas) => {
                               // 隐藏提示海报生成中
                                let dataURL = canvas.toDataURL('image/jpeg');
                                this.sharePoster.url = dataURL;
                                this.sharePoster.show = true;
                                this.sharePoster.height = canvas.height / 100; // 单位rem
                                this.sharePoster.width = canvas.width / 100;
                            });
                        },600)
                    });
                } else {
                    this.sharePoster.show = true;
                }
            })
        },
}

图片模糊问题

问题： html2canvas 渲染背景图片 background-image 会不清晰。
解决方法：使用 Img 标签。

高分辨率下，文字模糊

ios的兼容性问题

html2canvas: "1.0.0-rc. 5"版本在运行在苹果13.4 系统 iphone7 iphonex iPhone11下都生成不了的时候，安卓没问题，微信内置浏览器不行(真机)；
请看看html2canvas的版本，只有1.0.0-rc.4这个版本是可行的，如果你指定下载这个版本在package.json中看到是 ^ 1.0.0-rc.4，则不一定就是1.0.0-rc.4版本，它是指1.0.0-rc.4以上的版本，把^去掉再重新安装依赖就可以了

解决办法：
卸载npm uninstall html2canvas
重新npm i html2canvas@1.0.0-rc.4;
package.json中看到是 ^ 1.0.0-rc.4，^去掉再重新安装依赖

ios 生成图片时显示时不显的，大图几乎不显示

猜测是图片渲染的原因，为了确保能够生成图片
html2canvas库的工作原理：需要我们先提供一段DOM节点，然后它再读取并解析这一段DOM节点生成canvas对象。如果DOM节点中已经使用了<img>标签的话，它也会解析这个<img>标签的src属性，然后重新创建一个Image对象，给它添加crossOrigin="anonymous"属性后尝试以跨域的方式重新读取图片数据。需要注意的是，一般CDN上的图片都是带有缓存响应头并且会在浏览器端缓存的，而且缓存的不仅仅是图片数据，还有HTTP响应头。所以问题的根本原因我们就找到了，当html2canvas尝试以跨域的方式去读取图片数据时，它读取到的是浏览器的缓存数据，而且因为我们没有给DOM节点中的<img>标签添加crossOrigin="anonymous"属性，所以缓存数据是不带Access-Control-Allow-Origin响应头的，进而导致html2canvas库读取到的图片数据污染了生成的canvas对象，最终致使canvas导出数据报错
解决方法：
给DOM节点中的每一个<img>标签都加上crossOrigin="anonymous"属性就可以了

图片加载导致海报生成不了

用原生的方法等待所有图片加载完成后，在执行绘制
解决方法：

function imgLoad(imgArr, ck) { 
	let imgs = imgArr Promise.all(imgs.map((src, index) => { 
		return new Promise((resolve, reject) => { 
			let img = new Image() 
			img.onload = () => { 
				resolve(img)
			}
			img.onerror = () => { 
				reject(src, index) 
			} 
			img.crossOrigin = 'anonymous' 
			img.src = src 
		}) 
	})).then(arr => { ck(arr) }).catch(e => { 
		console.log(e) 
	}) 
},

https://segmentfault.com/a/1190000017086056

https://blog.csdn.net/qq_41227106/article/details/106764421

本文地址：https://blog.csdn.net/qq_41913971/article/details/107353958

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网