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

使用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就不模糊了

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值