小程序怎么获取图片的宽高
时间: 2023-11-09 12:02:09 浏览: 68
可以使用小程序提供的wx.getImageInfo()方法获取图片的宽高信息。该方法返回一个Promise对象,可以通过then()方法获取到图片信息,包括宽度、高度等。
示例代码如下:
```
wx.getImageInfo({
src: 'image.png',
success: function (res) {
console.log(res.width)
console.log(res.height)
}
})
```
相关问题
小程序调节图片大小的代码
当涉及到小程序中的图片大小调整时,可以使用以下代码示例:
```javascript
// 获取图片信息
wx.getImageInfo({
src: 'your-image-url',
success: function (res) {
// 获取图片原始宽高
var originalWidth = res.width;
var originalHeight = res.height;
// 设置图片新宽高
var newWidth = 200; // 新宽度
var newHeight = 200; // 新高度
// 计算缩放比例
var ratio = originalWidth / newWidth;
// 计算缩放后的高度
var scaledHeight = originalHeight / ratio;
// 绘制画布
var ctx = wx.createCanvasContext('canvas-id');
// 设置图片绘制区域
ctx.drawImage('your-image-url', 0, 0, newWidth, scaledHeight);
// 保存绘制
ctx.draw(false, function () {
// 将绘制保存为临时文件
wx.canvasToTempFilePath({
canvasId: 'canvas-id',
success: function (res) {
// 打印临时文件路径
console.log(res.tempFilePath);
},
fail: function (res) {
console.error(res);
}
});
});
},
fail: function (res) {
console.error(res);
}
});
```
在上述代码中,我们首先使用`wx.getImageInfo`获取图片的原始宽高,然后根据设定的新宽高计算缩放比例。接下来,我们使用`wx.createCanvasContext`创建画布上下文,并使用`ctx.drawImage`绘制图片到画布上。最后,我们使用`wx.canvasToTempFilePath`将绘制保存为临时文件,并可以通过`res.tempFilePath`获取临时文件的路径。
请注意,你需要将代码中的`your-image-url`替换为你的图片链接,并且需要在小程序中创建一个canvas组件,设置`canvas-id`属性为`canvas-id`。
希望这个代码示例能够帮助到你!如果你有任何进一步的问题,请随时提问。
微信小程序设置图片大小代码
你可以使用 `wx.getImageInfo()` 方法获取图片信息,然后根据需要设置图片大小。以下是一个示例代码:
```javascript
wx.getImageInfo({
src: 'your-image-source',
success: function(res) {
var width = res.width; // 获取图片真实宽度
var height = res.height; // 获取图片真实高度
var ratio = width / height; // 计算宽高比
// 根据宽高比及最大宽度限制计算图片宽度
var maxWidth = 300; // 最大宽度
var imageWidth = maxWidth;
var imageHeight = maxWidth / ratio;
// 设置图片大小
that.setData({
imageWidth: imageWidth,
imageHeight: imageHeight
});
}
});
```
在上面的示例代码中,我们使用了 `wx.getImageInfo()` 方法获取图片信息,并计算出了适合的大小。然后通过 `setData()` 方法将图片大小设置到页面中。注意,`that` 是指向当前页面对象的引用。你需要将其设置为正确的值。