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

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

程序员文章站 2022-06-21 22:02:59
使用uniapp写微信公众号时,很多需求是将网页报错成图片海报然后保存图片去分享,js插件html2canvas能够简单的将网页绘制成canvas并转换为图片使用方法:import html2canvas from 'html2canvas';makeImg() {let that=thisvar opts = {scale: 2, // 缩放倍数useCORS: true};html2canvas(document.getElementById('postBox'),...

使用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

相关标签: 随笔 javascript