How to use PHP and UniApp to implement the watermark function of images

How to use PHP and UniApp to implement the watermark function of pictures

Introduction:
In today's social media era, pictures have become one of the commonly used communication methods for people. In order to better protect their picture works, many people often add watermarks to pictures. This article will introduce how to use PHP and UniApp to implement the watermark function of images to make your images more personalized and secure.

1. PHP implements image watermark function

1. Create a PHP file and name it watermark.php.

dbf76759f06ecd7d83d709fe8271a31a

2. Name the image to be watermarked as source.jpg and place it in the same directory as the watermark.php file.
3. Visit watermark.php in your browser to see the watermarked image.

2. UniApp implements the image watermark function

1. Create a new page in the pages directory of UniApp and name it Watermark.
2. In the vue file of the Watermark page, add the following content:

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

<image src="../../static/source.jpg" mode="aspectFit" @tap="addWatermark" />

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
methods: {

addWatermark() {
  uni.getImageInfo({
    src: '../../static/source.jpg',
    success: (res) => {
      uni.previewImage({
        urls: ['../../static/source.jpg'],
        success: () => {
          uni.showLoading({
            title: '正在添加水印...',
            mask: true
          });
          
          const ctx = uni.createCanvasContext('watermarkCanvas');
          ctx.drawImage(res.path, 0, 0, res.width, res.height);
          ctx.setFontSize(40);
          ctx.setFillStyle('rgba(255, 255, 255, 0.5)');
          ctx.setTextAlign('center');
          ctx.setTextBaseline('middle');
          ctx.fillText('Watermark', res.width * 0.5, res.height * 0.5);
          ctx.draw(false, () => {
            uni.canvasToTempFilePath({
              canvasId: 'watermarkCanvas',
              success: (result) => {
                uni.hideLoading();
                uni.saveImageToPhotosAlbum({
                  filePath: result.tempFilePath,
                  success: () => {
                    uni.showToast({
                      title: '水印已添加',
                      icon: 'success'
                    });
                  },
                  fail: () => {
                    uni.showToast({
                      title: '保存失败',
                      icon: 'none'
                    });
                  }
                });
              },
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: '添加水印失败',
                  icon: 'none'
                });
              }
            });
          });
        }
      });
    },
    fail: () => {
      uni.showToast({
        title: '获取图片信息失败',
        icon: 'none'
      });
    }
  });
}

}
};

3. Name the image to be watermarked as source.jpg and place it in the static directory.
4. Add "pages/Watermark/index" in the pages field in the manifest.json file.
5. Access the UniApp project in the browser, click on the image to preview, and long press the image to add a watermark. The watermark will be automatically added to the center of the picture and saved in the phone's photo album.

Conclusion:
By using PHP and UniApp, we can easily implement the watermark function of images. PHP can process images on the server side, while UniApp can add watermarks on the mobile side. In this way, we can not only perform watermark processing through PHP on the computer, but also perform watermark operations on the mobile phone through UniApp, which is convenient and practical. Hope this article will be helpful to you.

The above is the detailed content of How to use PHP and UniApp to implement the watermark function of images. For more information, please follow other related articles on the PHP Chinese website!