enson
enson
  • 发布:2020-04-01 17:39
  • 更新:2020-04-07 11:15
  • 阅读:185

#插件讨论# 【 易用的头像裁剪上传、头像美化组件 - yqking0320 】 模糊问题

分类:uni-app

作者大大,您好,非常感谢提供这么棒的一个插件,在使用插件的时候有遇到一些模糊问题,具体场景如下:1 这边是通过uniapp开发微信小程序,在剪切用户上传的头像时,剪切后会很模糊,设置过quality为1,但是还是很模糊。真机效果可见附件。

2020-04-01 17:39 负责人:无 分享
已邀请:
lionxiong

lionxiong

2019年11月份解决过,uniapp(Android+iOS),截图过于模糊,调试解决了,放大截图保存参数放大,具体如代码,H5和小程序部分没试过,具体对照加下应该问题也不大。希望对你有帮助。

uni.canvasToTempFilePath({
x: x,
y: y,
width: width,
height: height,
destWidth: expWidth5,
destHeight: expHeight
5,
scale:5,
canvasId: 'avatar-canvas',
// fileType: 'png',
fileType: 'jpeg',
quality: 1.0,
success: (r)=>{
r = r.tempFilePath;
let ctxCanvas = this.ctxCanvas;
// expWidth = this.exportWidth2,
// expHeight = this.exportHeight
2;
expWidth = this.exportWidth5,
expHeight = this.exportHeight
5;
// ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
ctxCanvas.scale(this.scaleSize5, this.scaleSize5);
ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
ctxCanvas.draw(false);

                    this.$emit("upload", {avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn});  

                    return;
  • enson (作者)

    赞!!非常感谢分享!!!受益匪浅!!!

    2020-04-07 11:00

yqking0320

yqking0320 - 前后端、数据库、pc、h5、ios、android、小程序 开发

感谢反馈,这边会进行相关优化

  • enson (作者)

    好滴!

    2020-04-07 10:59

enson

enson (作者)

问题已解决!!可以通过expWidth,expHeight 设置导出的图片宽高,提高图片的清晰度,主要问题是因为自身对小程序的canvasToTempFilePath方法不太熟悉

1 先通过设置canvasToTempFilePath的fileType为jpg(quality只对jpg有效),quality为1
2 通过expWidth/expHeight 设置canvasToTempFilePath的destWidth/destHeight,设置输出的图片的宽高

二步走后即可提高图片的清晰度

参考文档:1 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
2 https://ext.dcloud.net.cn/plugin?id=404#rating

要回复问题请先登录注册