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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐