小程序是一种轻量级的应用程序，具有高效、便捷、实用等特点。图片在小程序中的应用也非常广泛，比如朋友圈、图库等场景。本文将介绍小程序中图片的相关知识和开发方法。
一、小程序中图片的格式
小程序中支持常见的图片格式，包括JPEG、PNG、GIF等。在使用图片时，一般使用Base64编码的方式将图片数据嵌入到HTML或CSS中。
二、小程序中图片的加载
小程序中有两种方式加载图片：一种是通过网络加载图片，另一种是使用本地图片。使用网络图片需要先将图片上传到服务器，然后通过图片的URL地址来进行加载；而使用本地图片则需要将图片存放在本地目录下，然后通过文件路径进行加载。
1.网络图片加载
小程序中通过使用wx.request()函数可以实现对网络图片的请求和加载。通过设置请求参数，可以实现对指定URL的网络图片进行请求，并将图片以Base64编码的方式返回给小程序端。
代码示例：
wx.request({
url: 'http://example.com/image.jpg',
responseType: 'arraybuffer',
success: (res) => {
let base64 = wx.arrayBufferToBase64(res.data);
this.setData({
imgBase64: 'data:image/jpeg;base64,' + base64
});
}
});
2.本地图片加载
小程序中使用本地图片需要使用wx.getImageInfo()函数获取图片信息，然后使用Image组件对图片进行显示。在获取到图片信息后，可以通过访问本地文件系统来获取图片数据。
代码示例：
wx.getImageInfo({
src: 'images/image.png',
success: (res) => {
let context = wx.createCanvasContext('canvas'), //创建画布
canvasWidth = res.width,
canvasHeight = res.height;
context.drawImage(res.path, 0, 0, canvasWidth, canvasHeight); //绘制图片到画布中
context.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: 'canvas', //画布ID
success: (res) => {
this.setData({
imgPath: res.tempFilePath
});
}
});
});
}
});
三、小程序中图片的处理
小程序中除了基本的图片加载外，还需要对图片进行各种处理，比如缩放、裁剪、旋转、滤镜等。下面将针对小程序中常见的图片处理需求进行介绍。
1.图片裁剪
小程序中使用Image组件显示图片时，可以通过设置mode属性的值来实现图片的裁剪效果。mode属性可选值有aspectFit、aspectFill、widthFix三种，其中aspectFill的效果最接近裁剪。
代码示例：
2.图片缩放
小程序中可以使用canvas组件对图片进行缩放操作。首先需要获取到图片的信息，然后通过canvas的scale()函数设置缩放比例。
代码示例：
wx.getImageInfo({
src: 'images/image.png',
success: (res) => {
let context = wx.createCanvasContext('canvas'),
canvasWidth = res.width,
canvasHeight = res.height;
context.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);
context.scale(0.5, 0.5); //缩小50%
context.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: (res) => {
this.setData({
imgPath: res.tempFilePath
});
}
});
});
}
});
3.图片旋转
小程序中可以使用canvas组件对图片进行旋转操作。首先需要获取图片信息，然后通过canvas的rotate()函数设置旋转角度。
代码示例：
wx.getImageInfo({
src: 'images/image.png',
success: (res) => {
let context = wx.createCanvasContext('canvas'),
canvasWidth = res.width,
canvasHeight = res.height,
rotateDeg = 60; //旋转角度
context.translate(canvasWidth / 2, canvasHeight / 2); //设置画布旋转中心点
context.rotate(rotateDeg * Math.PI / 180); //旋转角度
context.drawImage(res.path, -canvasWidth / 2, -canvasHeight / 2, canvasWidth, canvasHeight);
context.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: (res) => {
this.setData({
imgPath: res.tempFilePath
});
}
});
});
}
});
四、小程序中图片的优化
小程序中的图片不仅要保证显示效果，还需要使加载速度快、占用空间小。下面将介绍几种常用的图片优化方法。
1.图片压缩
在小程序中，可以使用canvas的toDataURL()函数直接将图片数据转化为Base64编码，从而减少网络传输带宽。同时，可以使用第三方库对图片进行压缩，从而减小占用空间和提高加载速度。
代码示例：
const image = wx.createImage();
image.src = 'images/image.jpg';
image.onload = () => {
let canvas = wx.createCanvasContext('canvas'),
canvasWidth = image.width,
canvasHeight = image.height;
canvas.drawImage(image, 0, 0, canvasWidth, canvasHeight);
let base64 = canvas.canvas.toDataURL('image/jpeg', 0.5);
//使用第三方库进行压缩
let compressedDataUrl = compressImg(base64, options);
};
2.图片懒加载
在小程序中，可以使用Intersection Observer API来实现图片的懒加载。当图片进入可见范围时才进行加载，从而避免了页面的闪烁和不必要的网络请求。
代码示例：
//在wxml中
//在js中
let observer = wx.createIntersectionObserver();
observer.relativeToViewport().observe('.lazy', (res) => {
if (res.intersectionRatio > 0) {
let imageSrc = res.dataset.src;
res.target.src = imageSrc;
}
});
总结：
通过本文的介绍，我们了解了小程序中图片的相关知识和开发方法。在开发小程序时，需要根据实际需求对图片进行裁剪、缩放、旋转等处理，并通过压缩、懒加载等手段来提高图片的加载速度和占用空间。同时，还需要注意保护用户隐私以及避免侵犯他人版权等问题。
