小程序
小游戏
企业微信
微信支付
扫描小程序码分享
你想反馈一个 Bug 还是 提一个需求?
如果是 Bug:
BUG
* Bug 表现是什么?预期表现是什么?
canvas导出的图片模糊了,在模拟器测试正常,到了真机上就出现模糊
* 如何复现?
提升图片清晰度
* 提供一个最简复现 Demo
如果是需求:
* 你希望有什么能力?
* 你需要这个能力的场景是 ?
29 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
- 生成的图片要乘屏幕像素比;
- 画图前获取好路径就不会出现图片消失,
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
如果你想画的图是250*150,那你可以画布大小1000*600这样子,画完后直接导出图片去等比缩放展示出来不就不会模糊了吗?你画那么小肯定会有点模糊的,特别是分辨率高的手机
@ Mithrandirヾ
兄弟,答应出来的XS,ip7是1,其他手机一般是1.0几,然后绘制图片乘以这个值没有多少改变啊,依然模糊
相关代码如下,请老铁帮忙看一下
wx.getSystemInfo({
success: res => {
console.log(res)
let pixelRatio = res.pixelRatio;
let ctxW = res.windowWidth;
let ctxH = res.windowHeight - 80;
let XS = ctxW / 375;
//屏幕系数比,以设计稿375*667(iphone7)为例
this
.setData({
pixelRatio: pixelRatio,
ctxW: ctxW,
ctxH: ctxH,
XS: XS
});
}
})
…………
context.drawImage(that.data.posterQrcodeUrl, 90, 720, 180 * XS, 180 * XS);
//画二维码
二位码依然比较模糊,起的作用不大,在社区看到这句话,好像有点作用
梁天智|Albie 官方
第二点,destWidth和destHeight单位是物理像素(pixel),canvas绘制的时候用的是逻辑像素(物理像素=逻辑像素 * density),所以这里如果只是使用canvas中的width和height(逻辑像素)作为输出图片的长宽的话,生成的图片width和height实际上是缩放了到canvas的 1 / density大小了,所以就显得比较模糊了。
所以这里你需要指定真实图片的width和height时,乘于 density就是canvas的大小了。
好的
亲测不模糊,差不多算高清的,大字小字都能看清
适配成功了 导出到手机上会不会模糊
起作用了,而且两张图是可以切换的,关闭当前就会返回上一个,路径写死了
ctx.drawImage(this.data.showBgImagePath, ctxW / 2 - 158*XS, 34 * XS, 317 * XS, 361 * XS);
ctx.drawImage(this.data.dogBgImagePath, 20 * XS, 331 * XS, 61 * XS, 98 * XS);
同时画两张图片?不会存在图片消失的情况吗?
// 默认像素比
let pixelRatio = this.data.pixelRatio;
// 屏幕系数比,以设计稿375*667(iphone7)为例
let XS = this.data.windowWidth/375;
你这个做适配有没有起作用?
let ctx = wx.createCanvasContext('myCanvas');
// 画布宽高
let ctxW = this.data.windowWidth;
let ctxH = this.data.windowHeight - 80;
// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, '#0E128D');
grd.addColorStop(1, '#080E3A');
ctx.setFillStyle(grd);
ctx.fillRect(0, 0, ctxW, ctxH);
ctx.setFontSize(18 * XS);
ctx.setFillStyle('#F7F7FA');
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
ctx.fillText(this.data.name, ctxW / 2, 58 * XS);
ctx.setFontSize(35 * XS);
ctx.setFillStyle('#232884');
this.fontLineFeed(ctx, this.data.title, 1, 38 * XS, ctxW / 2, 120 * XS);
ctx.setFontSize(14);
ctx.setFillStyle('#FF72A5');
this.fontLineFeed(ctx, this.data.desc, 18 * XS, 20 * XS, 200 * XS, 330 * XS);
你看这段代码你能看懂吗
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
- 生成的图片要乘屏幕像素比;
- 画图前获取好路径就不会出现图片消失,
如果你想画的图是250*150,那你可以画布大小1000*600这样子,画完后直接导出图片去等比缩放展示出来不就不会模糊了吗?你画那么小肯定会有点模糊的,特别是分辨率高的手机
@ Mithrandirヾ
兄弟,答应出来的XS,ip7是1,其他手机一般是1.0几,然后绘制图片乘以这个值没有多少改变啊,依然模糊
相关代码如下,请老铁帮忙看一下
wx.getSystemInfo({
success: res => {
console.log(res)
let pixelRatio = res.pixelRatio;
let ctxW = res.windowWidth;
let ctxH = res.windowHeight - 80;
let XS = ctxW / 375;
//屏幕系数比,以设计稿375*667(iphone7)为例
this
.setData({
pixelRatio: pixelRatio,
ctxW: ctxW,
ctxH: ctxH,
XS: XS
});
}
})
…………
context.drawImage(that.data.posterQrcodeUrl, 90, 720, 180 * XS, 180 * XS);
//画二维码
二位码依然比较模糊,起的作用不大,在社区看到这句话,好像有点作用
梁天智|Albie 官方
第二点,destWidth和destHeight单位是物理像素(pixel),canvas绘制的时候用的是逻辑像素(物理像素=逻辑像素 * density),所以这里如果只是使用canvas中的width和height(逻辑像素)作为输出图片的长宽的话,生成的图片width和height实际上是缩放了到canvas的 1 / density大小了,所以就显得比较模糊了。
所以这里你需要指定真实图片的width和height时,乘于 density就是canvas的大小了。
好的
亲测不模糊,差不多算高清的,大字小字都能看清
适配成功了 导出到手机上会不会模糊
起作用了,而且两张图是可以切换的,关闭当前就会返回上一个,路径写死了
ctx.drawImage(this.data.showBgImagePath, ctxW / 2 - 158*XS, 34 * XS, 317 * XS, 361 * XS);
ctx.drawImage(this.data.dogBgImagePath, 20 * XS, 331 * XS, 61 * XS, 98 * XS);
同时画两张图片?不会存在图片消失的情况吗?
// 默认像素比
let pixelRatio = this.data.pixelRatio;
// 屏幕系数比,以设计稿375*667(iphone7)为例
let XS = this.data.windowWidth/375;
你这个做适配有没有起作用?
let ctx = wx.createCanvasContext('myCanvas');
// 画布宽高
let ctxW = this.data.windowWidth;
let ctxH = this.data.windowHeight - 80;
// 默认像素比
let pixelRatio = this.data.pixelRatio;
// 屏幕系数比,以设计稿375*667(iphone7)为例
let XS = this.data.windowWidth/375;
// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, '#0E128D');
grd.addColorStop(1, '#080E3A');
ctx.setFillStyle(grd);
ctx.fillRect(0, 0, ctxW, ctxH);
ctx.drawImage(this.data.showBgImagePath, ctxW / 2 - 158*XS, 34 * XS, 317 * XS, 361 * XS);
ctx.drawImage(this.data.dogBgImagePath, 20 * XS, 331 * XS, 61 * XS, 98 * XS);
ctx.setFontSize(18 * XS);
ctx.setFillStyle('#F7F7FA');
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
ctx.fillText(this.data.name, ctxW / 2, 58 * XS);
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
ctx.setFontSize(35 * XS);
ctx.setFillStyle('#232884');
this.fontLineFeed(ctx, this.data.title, 1, 38 * XS, ctxW / 2, 120 * XS);
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
ctx.setFontSize(14);
ctx.setFillStyle('#FF72A5');
this.fontLineFeed(ctx, this.data.desc, 18 * XS, 20 * XS, 200 * XS, 330 * XS);
你看这段代码你能看懂吗