欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html2canvas生成海报的各种问题

程序员文章站 2022-06-21 20:24:14
基础写法
生成海报

poster content

基础写法

<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