Canvas导出图片模糊

微信公开课小程序热门讨论关于「Canvas导出图片模糊」的小程序开发问题
补充:你想反馈一个Bug还是提一个需求如果是BugBUGBug表现是什么预期表现是什么canvas导出的图片模糊了，在模拟器测试正常，到了真机上就出现模糊如何复现提升图片清晰度提供一个最简复现Demo如果是
展开:你想反馈一个Bug还是提一个需求如果是Bug：BUG*Bug表现是什么预期表现是什么canvas导出的图片模糊了，在模拟器测试正常，到了真机上就出现模糊*如何复现提升图片清晰度*提供一个最简复现Demo如果是需求：*你希望有什么能力*你需要这个能力的场景是?即速小程序：生成的图片要乘屏幕像素比；画图前获取好路径就不会出现图片消失，：如果你想画的图是250*150，那你可以画布大小1000*600这样子，画完后直接导出图片去等比缩放展示出来不就不会模糊了吗你画那么小肯定会有点模糊的，特别是分辨率高的手机：@Mithrandirヾ兄弟，答应出来的XS,ip7是1,其他手机一般是10几，然后绘制图片乘以这个值没有多少改变啊，依然模糊相关代码如下，请老铁帮忙看一下wxgetSystemInfo({success:res={consolelog(res)letpixelRatio=respixelRatio;letctxW=reswindowWidth;letctxH=reswindowHeight80;letXS=ctxW375;屏幕系数比，以设计稿375*667（iphone7）为例thissetData({pixelRatio:pixelRatio,ctxW:ctxW,ctxH:ctxH,XS:XS});}})…………contextdrawImage(thatdataposterQrcodeUrl,90,720,180*XS,180*XS);画二维码二位码依然比较模糊，起的作用不大，在社区看到这句话，好像有点作用梁天智|Albie官方第二点，destWidth和destHeight单位是物理像素（pixel），canvas绘制的时候用的是逻辑像素（物理像素=逻辑像素*density），所以这里如果只是使用canvas中的width和height（逻辑像素）作为输出图片的长宽的话，生成的图片width和height实际上是缩放了到canvas的1density大小了，所以就显得比较模糊了所以这里你需要指定真实图片的width和height时，乘于density就是canvas的大小了：好的：亲测不模糊，差不多算高清的，大字小字都能看清：适配成功了导出到手机上会不会模糊：起作用了，而且两张图是可以切换的，关闭当前就会返回上一个，路径写死了：ctxdrawImage(thisdatashowBgImagePath,ctxW2158*XS,34*XS,317*XS,361*XS);ctxdrawImage(thisdatadogBgImagePath,20*XS,331*XS,61*XS,98*XS);同时画两张图片不会存在图片消失的情况吗：默认像素比letpixelRatio=thisdatapixelRatio;屏幕系数比，以设计稿375*667（iphone7）为例letXS=thisdatawindowWidth375;你这个做适配有没有起作用：letctx=wxcreateCanvasContext(myCanvas);画布宽高letctxW=thisdatawindowWidth;letctxH=thisdatawindowHeight80;默认像素比letpixelRatio=thisdatapixelRatio;屏幕系数比，以设计稿375*667（iphone7）为例letXS=thisdatawindowWidth375;垂直渐变constgrd=ctxcreateLinearGradient(0,0,0,ctxH);grdaddColorStop(0,0E128D);grdaddColorStop(1,080E3A);ctxsetFillStyle(grd);ctxfillRect(0,0,ctxW,ctxH);ctxdrawImage(thisdatashowBgImagePath,ctxW2158*XS,34*XS,317*XS,361*XS);ctxdrawImage(thisdatadogBgImagePath,20*XS,331*XS,61*XS,98*XS);ctxsetFontSize(18*XS);ctxsetFillStyle(F7F7FA);ctxsetTextAlign(center);ctxsetTextBaseline(middle);ctxfillText(thisdataname,ctxW2,58*XS);ctxsetTextAlign(center);ctxsetTextBaseline(middle);ctxsetFontSize(35*XS);ctxsetFillStyle(232884);thisfontLineFeed(ctx,thisdatatitle,1,38*XS,ctxW2,120*XS);ctxsetTextAlign(center);ctxsetTextBaseline(middle);ctxsetFontSize(14);ctxsetFillStyle(FF72A5);thisfontLineFeed(ctx,thisdatadesc,18*XS,20*XS,200*XS,330*XS);你看这段代码你能看懂吗
更多有关「Canvas导出图片模糊」的讨论可以前往微信公开课小程序参与互动哦！了解更多