上面这张图是canvas , 下面是生成出来的。下面这张图很模糊。
setTimeout(() => {
this.cancelChooes();
const systemInfo = wx.getSystemInfoSync();
let pixelRatio = systemInfo.pixelRatio;
console.log("设备像素比--->" + this.screenWidth);
console.log("设备像素比2--->" + pixelRatio);
this.draw(this.localImg).then(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: this.screenWidth,
height: this.screenWidth,
destWidth: this.screenWidth * pixelRatio,
destHeight: this.screenWidth * pixelRatio,
canvasId: "canvas",
fileType: "jpg",
quality: 1,
success: async res => {
let img = await uploadImg(res.tempFilePath);
this.previewImg = img;
console.log("导出图片:" + img);
}
});
});
wx.hideLoading();
}, 1000);
如果图片模糊的话可以把输出宽高设为2倍试试
我把destWidth和destHeight注释了之后,图片就清晰了。
有大佬看看我的问题吗,canvastotempfilepath 有几率生成空图
即便输出和原图宽高一致,图片的大小几乎和原图一样,可是根本没用。因为图片的dpi被修改了,原图的dip是300,canvas导出的图片dpi是96。怎么可能清晰呢?不明白这个dpi修改的机制和原理是啥?有懂得人给科普下呗。。。
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
代码片段https://developers.weixin.qq.com/s/hgwFJhmR7Vbb (所有机型,所有版本)华为荣耀8X 版本号7.0.6