UniApp实现拍照与图片处理的技巧与实践-猿码集

1. UniApp实现拍照和图片处理的介绍

UniApp是一个跨平台开发框架，可以使用一套代码开发出多个平台的应用，包括iOS、Android、H5等。在这些应用中，许多应用都需要涉及到拍照和图片处理的功能。本文将主要介绍如何使用UniApp实现拍照和图片处理的技巧和实践。

2. 实现拍照功能

2.1 获取相机权限

在使用UniApp实现拍照功能时，首先需要获取相机权限，只有获取到相机权限才能打开相机进行拍照操作。需要在manifest.json文件中配置App端使用的权限，其中相机需要使用camera权限。


"android": {
  "permissions": [
    "android.permission.CAMERA"
  ]
},
"app-plus": {
  "permissions": [
    "camera"
  ]
}

2.2 打开相机进行拍照

使用UniApp提供的uni.chooseImage方法即可打开相机进行拍照操作。通过设置sourceType参数为camera，即可调用相机进行拍照操作，返回值为临时文件路径。


uni.chooseImage({
    sourceType: ['camera'],
    success: function (res) {
        var tempFilePaths = res.tempFilePaths;
    }
});

2.3 保存图片到系统相册

在完成拍照操作之后，通常需要将照片保存到系统相册中，用户可以随时查看和管理。UniApp中可以使用uni.saveImageToPhotosAlbum方法将图片保存到系统相册中。


uni.saveImageToPhotosAlbum({
    filePath: tempFilePaths[0],
    success: function () {
        console.log('保存图片成功');
    },
    fail: function () {
        console.log('保存图片失败');
    }
});

3. 实现图片处理功能

3.1 压缩图片

在实际开发中，经常需要进行图片的大小压缩，以便降低网络传输的流量和提高展示效率。UniApp提供了uni.compressImage方法用于对图片进行压缩。


uni.compressImage({
    src: tempFilePaths[0],
    quality: 60,
    success: function (res) {
        console.log(res.tempFilePath);
    }
});

src参数为要压缩的图片路径，quality参数为压缩的质量，取值范围为0-100，数值越小压缩率越高。压缩后的图片路径通过返回值的tempFilePath返回。

3.2 裁剪图片

在许多应用中，需要对图片进行裁剪操作，以便适配不同的展示场景。UniApp提供了uni.previewImage方法用于预览图片并且支持裁剪操作。


uni.previewImage({
    urls: tempFilePaths,
    current: tempFilePaths[0],
    success: function (res) {
        uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (info) {
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original'],
                    cropSize: [info.width, info.height, 'rectangle'],
                    success: function (chooseResult) {
                        console.log('裁剪后的图片路径：' + chooseResult.tempFilePaths[0]);
                    }
                });
            }
        });
    }
});

uni.previewImage方法可以用于预览一组图片，设置urls参数为图片数组，current参数为默认展示的图片。当用户长按图片后，可选择进入裁剪操作页面，设置cropSize参数为图片裁剪的区域。

3.3 图片水印

在许多应用中，需要对图片进行添加水印操作，以便加强版权保护和提高品牌宣传效果。UniApp提供了canvas组件，可以实现在图片上添加水印。


<canvas class="watermark" canvas-id="watermark" style="width: 100%; height: 100%;"></canvas>

在页面中添加一个canvas组件，并设置样式和属性。可以在Vue的created或mounted生命周期中获取组件实例。


this.$nextTick(() => {
    const query = uni.createSelectorQuery();
    query.select('.watermark').fields({ node: true, size: true })
        .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = tempFilePaths[0];
        img.onload = () => {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            
            ctx.font = '16px Arial';
            ctx.fillStyle = 'white';
            ctx.fillText('这是水印', canvas.width - 100, canvas.height - 20);
            
            uni.canvasToTempFilePath({
                canvasId: 'watermark',
                success: function (res) {
                    console.log(res.tempFilePath);
                }
            }, this);
        };
    });
});

使用ctx.drawImage方法可在canvas上展示图片。在图片上绘制文字，可以使用ctx.fillText方法进行绘制。绘制完成后，调用uni.canvasToTempFilePath方法可将内容生成为图片保存成本地文件。

4. 总结

本章介绍了UniApp实现拍照和图片处理的技巧和实践。在使用UniApp实现拍照功能时，首先需要获取相机权限，并通过uni.chooseImage方法调用相机进行拍照操作，并且可利用uni.saveImageToPhotosAlbum保存到系统相册中。在图片处理方面，可以使用uni.compressImage方法对图片进行压缩，使用uni.previewImage方法可预览图片并支持裁剪操作，使用canvas组件可实现在图片上添加水印等实用操作。

UniApp实现拍照与图片处理的技巧与实践