UniApp's tips for implementing picture cropping and filter effects

UniApp’s tips for realizing image cropping and filter effects

Introduction:
In mobile application development, image processing is a common requirement, including the realization of image cropping and filter effects. UniApp, as a cross-platform development framework based on Vue.js, can easily implement these functions on multiple platforms. This article will introduce how to implement image cropping and filter effects in UniApp, and provide code examples.

1. Implementation of image cropping

1. Using the uni-app plug-in
   Uni-app officially provides an image cropping plug-inuni-image-cropper , you can quickly realize the image cropping function. You can introduce the plug-in by configuring the following code in the H5 node of the manifest.json file:

   "H5": {
     "plugins": {
    "uni-image-cropper": {
      "version": "1.0.0",
      "provider": "uni-app.cn"
    }
     }
   }

2. Use canvas for cropping
   If you don’t want to use a plug-in, you can also use canvas to achieve image cropping. The following is a code example to implement image cropping:

   // 在template中添加一个canvas元素以及一个用于选择图片的按钮
   <canvas id="canvas" style="width: 300px; height: 200px;"></canvas>
   <input type="file" accept="image/*" @change="chooseImage">
   
   // 在methods中编写chooseImage方法
   methods: {
     chooseImage(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
   
    reader.onload = (event) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
   
        // 根据图片的宽高计算裁剪区域
        const ratio = img.width / img.height;
        let width, height, x, y;
        if (img.width > img.height) {
          width = img.height;
          height = img.height;
          x = (img.width - img.height) / 2;
          y = 0;
        } else {
          width = img.width;
          height = img.width;
          x = 0;
          y = (img.height - img.width) / 2;
        }
   
        canvas.width = width;
        canvas.height = height;
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
   
        // 裁剪后的图片数据
        const croppedImage = canvas.toDataURL('image/png');
        // 可以将croppedImage作为参数传递给其他方法进行处理
      }
   
      img.src = event.target.result;
    }
   
    reader.readAsDataURL(file);
     }
   }

2. Implementation of filter effects

UniApp supports adding filter effects to images through the CSS filter attribute . The following are code examples of several commonly used filter effects:

1. Grayscale effect

   .filter-grayscale {
     filter: grayscale(100%);
   }

2. Saturation adjustment

   .filter-saturate {
     filter: saturate(200%);
   }

3. Invert Color

   .filter-invert {
     filter: invert(100%);
   }

4. Blur Effect

   .filter-blur {
     filter: blur(5px);
   }

In code, you can add different colors to the picture elements class to apply different filter effects. For example:

<img class="filter-grayscale" src="image.png">

If you need to dynamically add filter effects, you can use the style attribute and achieve it through Vue.js data binding. For example:

<img :style="'filter: grayscale(' + grayscaleValue + '%)'" src="image.png">

In this example, when the value of grayscaleValue changes, the grayscale value of the image will change accordingly.

Conclusion:
By using UniApp’s plug-in or using canvas and CSS filter properties, we can easily achieve image cropping and filter effects. The above is a simple implementation example, you can extend and optimize it according to your own needs. I hope this article can help you implement image processing functions in UniApp.

The above is the detailed content of UniApp's tips for implementing picture cropping and filter effects. For more information, please follow other related articles on the PHP Chinese website!