开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
文档中心
凯发app官方网站的技术支持 & 案例 faq 
支付宝小程序
案例分析
sdk & demo下载
常见问题
常用工具
iot小程序
运维保障
小程序 > 支付宝小程序 > 常见问题 > 如何解决画布模糊问题
贡献者
收藏
我的文档
设置
问题描述
在使用画布编辑相册图片、和生成图片保存图片到相册时会出现图片模糊问题(渲染到 canvas 上模糊或生成图片到相册模糊)。 
凯发app官方网站的解决方案 
渲染到canvas上模糊
在使用 my.chooseimage 相册选择图片时,可以引导勾选使用原图。
my.getimageinfo 获取图片像素信息,根据图片宽/高,动态设置 canvas 的宽/高,使用 ctx.drawimage 绘制图像,尽量让图片保持原始尺寸不变形。 
示例代码
.axml
html
复制代码
<canvas id="canvas" disable-scroll ontap="onmousedown" ontouchstart="touchstart" ontouchmove="touchmove" ontouchend="touchend" ontouchcancel="touchcancel" class="canvas" width="{{canvaswidht}}px" height="{{canvasheight}}px" style="border: 1px solid;
width:{{canvaswidht}}px;
height:{{canvasheight}}px;"/>
.js
javascript
复制代码
let cxt = "";
//创建画布变量
page({
data: {
canvaswidht:"400",//画布宽度
canvasheight:"500",//画布高度
pixelratio:""//设备像素比},
onload(){
cxt = my.createcanvascontext('canvas')
;},
drawimage(){
//编辑图像事件
my.chooseimage( {
count: 1,
success: (res) => {
my.getimageinfo({
src: res.apfilepaths[0],
success: (res3) => {
this.setdata({
canvaswidht:res3.width,
canvasheight:res3.height
},
() => { // 接受传递回调函数
console.log(json.stringify(res3))
cxt.drawimage(res.apfilepaths[0], 0, 0,
this.data.canvaswidht,
this.data.canvasheight);
cxt.draw();
});
}
})
},
});
}
});
生成图片到相册模糊
通过设置 quality 来控制图片质量,目前仅对 jpg 有效,取值范围为 (0, 1],不在范围内时当作 1.0 处理。
提前获取手机设备系统信息,获取到设备像素比,通过 canvas 宽度*设备像素比(pixelratio)和 canvas 高度*设备像素比(pixelratio)的计算值入参 destwidth 和 destheight。 注意:destwidth 和 destheight 单位是物理像素(pixel),canvas 绘制的时候用的是逻辑像素(物理像素=逻辑像素 * density),所以如果只是使用 canvas 中的 width 和 height(逻辑像素)作为输出图片的长宽,生成的图片 width 和 height 实际上是缩放到 canvas的 1 / density 大小。
把导出图片的大小设置为 canvas 大小的 2 到 4 倍即可。
示例代码
.axml
.js
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图