淘宝小程序canvas踩坑

最新推荐文章于 2024-04-26 15:36:18 发布

red_paper_zj

最新推荐文章于 2024-04-26 15:36:18 发布

阅读量200

点赞数

文章标签：小程序 canva可画

本文链接：https://blog.csdn.net/red_paper_zj/article/details/133773013

版权

一、图片清晰度
项目用的是淘宝小程序，百度了一大圈，能参考的也就是微信小程序，都是说改变输出图片宽高也就是destWidth，destHeight，如下图：

在这里插入图片描述

但经过实测真的没用该模糊的还是模糊，然后怒而看原生canvas发现和小程序的文档大差不差，遂作罢，但我们已知等式：原始尺寸 = 样式尺寸 * 像素比倍率

我们知道解决清晰度的关键就是先放大后缩小，由此可得如下操作

先在canvas标签作如下操作

<canvas id="canvas" width="{{canvasWidth * systemInfo.pixelRatio}}" height="{{canvasHeight * systemInfo.pixelRatio}}" style="width: {{canvasWidth}}px;height: {{canvasHeight}}px;"></canvas>

width和height属性是canvas标签的宽高，style内的canvasWidth和canvasHeight才是最后实际展示渲染的宽高，systemInfo.pixelRatio则是通过my.getSystemInfo API获取到的像素比

做完上述操作后，得到如下图渲染所示：红框为实际展示的canvas区域大小，图片只渲染了一部分

在这里插入图片描述

所以为了要完整渲染这个canvas区域，我们需要对他进行放大

let { pixelRatio } = this.data.systemInfo // 获取设备像素比

const ctx = my.createCanvasContext('canvas') // 获取canvas

ctx.scale(pixelRatio, pixelRatio) // 放大canvas

放大之后，会如下图所示

可以看到canvas已经被填满了，实际图片相较于没做操作之前也已经很清晰非常多，与原图保持一致

最后导出图片的时候也记得放大图片宽高

ctx.toTempFilePath({

          x: x,

          y: y,

          width: w * pixelRatio,

          height: h * pixelRatio,

          // destWidth: w * pixelRatio, // 输出图片宽度

          // destHeight: h * pixelRatio, // 输出图片高度

          fileType: 'jpg',

          quality: 1, // 图片的质量，目前仅对 jpg 有效，取值范围为 (0, 1]

          success(res) {

            that.setData({

              apFilePath: res.apFilePath

            })

          },

          fail(error) {

            console.log(error);

          }

        });