首页 const ctx = wx.createCanvasContext('photo_canvas'); const SIZE = 200 const ratio = Math.max(res.width / SIZE, res.height / SIZE, 1) const smallWidth = Math.trunc(res.width / ratio) const smallHeight = Math.trunc(res.height / ratio) // 将宽高大小设置到页面的canvas元素(checkCanvas)上 ctx.drawImage(tempFilePaths[index], 0, 0, smallWidth, smallHeight) ctx.draw(false, function () { wx.canvasToTempFilePath({ width: smallWidth, height: smallHeight, destWidth: smallWidth, destHeight: smallHeight, canvasId: 'photo_canvas',请问怎么修改代码中的参数，让输出图片保持原始比列，而不是剪切图片或形变的图片

const ctx = wx.createCanvasContext('photo_canvas'); const SIZE = 200 const ratio = Math.max(res.width / SIZE, res.height / SIZE, 1) const smallWidth = Math.trunc(res.width / ratio) const smallHeight = Math.trunc(res.height / ratio) // 将宽高大小设置到页面的canvas元素(checkCanvas)上 ctx.drawImage(tempFilePaths[index], 0, 0, smallWidth, smallHeight) ctx.draw(false, function () { wx.canvasToTempFilePath({ width: smallWidth, height: smallHeight, destWidth: smallWidth, destHeight: smallHeight, canvasId: 'photo_canvas',请问怎么修改代码中的参数，让输出图片保持原始比列，而不是剪切图片或形变的图片

时间: 2024-01-16 13:02:37 浏览: 149

要让输出的图片保持原始比例，你可以修改代码如下： ``` const ctx = wx.createCanvasContext('photo_canvas'); const SIZE = 200; const ratio = Math.max(res.width / SIZE, res.height / SIZE, 1); const smallWidth = Math.trunc(res.width / ratio); const smallHeight = Math.trunc(res.height / ratio); const x = (smallWidth - res.width) / 2; const y = (smallHeight - res.height) / 2; ctx.drawImage(tempFilePaths[index], x, y, res.width, res.height, 0, 0, smallWidth, smallHeight); ctx.draw(false, function () { wx.canvasToTempFilePath({ width: smallWidth, height: smallHeight, destWidth: smallWidth, destHeight: smallHeight, canvasId: 'photo_canvas', success: function (res) { console.log(res.tempFilePath); } }); }); ``` 这里使用了`drawImage`方法的另一个重载版本，它可以指定在画布上绘制图像的位置和大小，以及将图像的哪一部分裁剪出来绘制。首先计算出在画布上绘制图像的起始坐标，使其居中显示，然后指定绘制的图像大小为原始大小，最后指定输出的图片大小为缩小后的大小。

阅读全文