我在元素里面插入了base64图片,使用html2canvas将元素转为图片后插入的这个base64图片很模糊,有大佬知道怎么解决么,用dpi和scale只能让字清晰,调再大图片都是模糊的
<script module="canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
data() {
return {}
},
methods: {
downImg(e, ownerVm) {
window.scrollTo(0, 0) //注意这里必须设置为顶部不然会出现图片不全
html2canvas(document.querySelector('#canvasImg'), {
allowTaint: true, //是否允许跨域图像渲染画布
useCORS: true, //是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
scale: 2, // 处理模糊问题
dpi: 30000 ,// 处理模糊问题
}).then(function(canvas) {
// var context = canvas.getContext('2d')
// console.log("context", context)
// // 这段代码去除锯齿,会使图片变得清晰,结合scale放大处理
// context.mozImageSmoothingEnabled = false;
// context.webkitImageSmoothingEnabled = false;
// context.msImageSmoothingEnabled = false;
// context.imageSmoothingEnabled = false;
ownerVm.callMethod('receive', canvas.toDataURL('image/jpeg', 1.0))
}).catch(err => {
ownerVm.callMethod('showToast', `生成图片失败,请重试,${err}`)
})
},
}
}
</script>
<script>
import {base64ToPath,pathToBase64} from 'image-tools'
export default {
data() {
return {
}
},
onLoad: function () {
},
methods: {
//提示
showToast(content) {
uni.showToast({
title: content,
icon: 'none',
duration: 2000,
});
},
// 将base64位的图片路径转换为临时路径
receive(val) {
this.loadingNum = 0
this.isLoading = true
//去除base64位中的空格
this.imgUrl= val.replace(/[\r\n]/g, '');
//将base64位的图片路径转换为临时路径
setTimeout(() => {
const url= this.imgUrl;
base64ToPath(url).then(path => {
this.saveImage(path,url)
})
.catch(error => {
console.error('图片的临时路径转换出错了:', error);
});
}, 500);
},
// 保存图片到手机相册
saveImage(path,imgUrl) {
uni.saveImageToPhotosAlbum({
filePath:path, // 需要临时文件路径,否则base64无法保存
success: () => {
// this.showToast('保存图片到本地相册成功')
this.loadingNum = 1
setTimeout(() =>{
this.isLoading = false;
}, 1000);
},
fail: (err) => {
this.isLoading = false;
this.showToast(err+'保存图片到本地相册失败')
}
});
},
},
}
</script>