getCanvasImg: function (index, failNum, tempFilePaths) { let that = this; if (index < tempFilePaths.length) { wx.getImageInfo({ src: tempFilePaths[index], success: function (res) { const SIZE = 300 const ratio = Math.max((res.width/SIZE)*1, (res.height/SIZE)*1, 1) const smallWidth = Math.trunc(res.width / ratio) const smallHeight = Math.trunc(res.height / ratio) console.log('宽度:',smallWidth) console.log('高度:',smallHeight) console.log('缩放比例:',ratio) // 将宽高大小设置到页面的canvas元素(checkCanvas)上 const ctx = wx.createCanvasContext('photo_canvas'); 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', success: function (res) { var filePaths = res.tempFilePath console.log(filePaths) that.data.pics || (that.data.pics = []) that.data.pics.push(...filePaths) that.setData({ pics: that.data.pics }) } }) }) } }) } },报错信息是:[渲染层网络层错误] Failed to load local image resource /pages/myProduct/h the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) (env: macOS,mp,1.06.2303220; lib: 2.32.0)
时间: 2024-02-19 18:02:10 浏览: 83
这个错误信息提示你在加载本地图片资源时出现了问题,可能是由于服务器内部错误导致的。建议你检查一下本地图片资源的路径是否正确,并确认服务器是否正常运行。同时,可以检查一下调用 wx.getImageInfo()方法时传入的 tempFilePaths[index] 参数是否正确,并确保该图片资源存在。如果问题仍然存在,你可以尝试重新启动服务器或联系服务器管理员寻求帮助。
相关问题
getCanvasImg: function (tempFilePaths) { let that = this; wx.getImageInfo({ src: tempFilePaths, success: function (res) { const SIZE = 300 const ratio = Math.max((res.width/SIZE)*1, (res.height/SIZE)*1, 1) const smallWidth = Math.trunc(res.width / ratio) const smallHeight = Math.trunc(res.height / ratio) console.log('宽度:',smallWidth) console.log('高度:',smallHeight) console.log('缩放比例:',ratio) const ctx = wx.createCanvasContext('photo_canvas'); ctx.drawImage(tempFilePaths, 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) var filePaths = res.tempFilePath console.log(filePaths) that.data.pics || (that.data.pics = []) that.data.pics.push(...filePaths) that.setData({ pics: that.data.pics }) } }) }) } }) },报错信息是: Failed to load local image resource /pages/myProduct/h the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) (env: macOS,mp,1.06.2303220; lib: 2.32.0
这个错误信息看起来与你之前提到的错误信息相同,都是关于加载本地图片资源时出现了问题,返回了一个500内部服务器错误的状态码。在这段代码中,图片路径是通过tempFilePaths参数传递进来的,因此你需要确保该参数的值是正确的图片路径。如果图片路径正确,那么可能是服务器端的问题引起的,你可以联系服务器管理员查看是否有任何问题。同时,也可以尝试清除浏览器缓存或使用其他浏览器来查看是否能够解决问题。
wx.getImageInfo({ src: tempFilePaths[index], success: function (res) { const ctx = wx.createCanvasContext('photo_canvas'); var picW = res.width, picH = res.height; ctx.drawImage(tempFilePaths[index], 0, 0, 100, parseInt(picH / picW * 100)) ctx.draw(false, function () { wx.canvasToTempFilePath({ x: -200, y: -200, width: 100, height: parseInt(picH / picW * 100), destWidth: 100, destHeight: parseInt(picH / picW * 100), canvasId: 'photo_canvas', success: function (res) { var filePaths = res.tempFilePath 请问怎么修改上面的一些参数,让最终输出的图片,按原始比列缩小,而不是固定高度,导致图片形变
要让最终输出的图片按原始比例缩小,可以将固定高度的参数改为固定宽度,并且按照原始比例计算高度。具体的修改如下:
1. 将固定高度的参数 `parseInt(picH / picW * 100)` 改为固定宽度的参数 `100`。
2. 计算按照原始比例缩小后的高度,公式为 `picH / picW * 100`。
3. 将 `height` 和 `destHeight` 的值改为按照原始比例计算出的高度。
修改后的代码如下:
```
wx.getImageInfo({
src: tempFilePaths[index],
success: function (res) {
const ctx = wx.createCanvasContext('photo_canvas');
var picW = res.width,
picH = res.height;
ctx.drawImage(tempFilePaths[index], 0, 0, 100, picH / picW * 100)
ctx.draw(false, function () {
wx.canvasToTempFilePath({
x: -200,
y: -200,
width: 100,
height: picH / picW * 100,
destWidth: 100,
destHeight: picH / picW * 100,
canvasId: 'photo_canvas',
success: function (res) {
var filePaths = res.tempFilePath
```
这样就能够保持图片的原始比例,避免形变。
阅读全文