当前位置： 移动技术网 > IT编程>开发语言>JavaScript > uniapp写h5使用html2canvas时生成的图片模糊的解决办法

uniapp写h5使用html2canvas时生成的图片模糊的解决办法

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

使用uniapp写微信公众号时，很多需求是将网页报错成图片海报然后保存图片去分享，js插件html2canvas能够简单的将网页绘制成canvas并转换为图片
使用方法：

import html2canvas from 'html2canvas';

makeImg() {
	let that=this
	var opts = {
		scale: 2, // 缩放倍数
		useCORS: true
	};
	html2canvas(document.getElementById('postBox'), opts).then(function (canvas) {
		var url = canvas.toDataURL('image/png',1.0)
		that.dataURL = url // 这里把图片赋值给你自己想要赋值的参数
	});
},

这里的坑就是，当你把图片设置为背景图片后 用html2canvas生成的图片会很模糊，然而使用uniapp的image标签时，uniapp会自动将image标签编译为自己的组件 并且把图片设置为背景图片展示在页面上，使用html2canvas生成的图片会很模糊。解决方法时 在需要生成海报的内容里的图片 使用原生标签

<img />

这样编译时就是原生的img标签 生成的canvas就不模糊了

本文地址：https://blog.csdn.net/linguo2625469/article/details/107385565

您可能感兴趣的文章:

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

相关文章:

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