Use uniapp to implement image watermark function

Using uniapp to implement the image watermark function requires specific code examples

With the popularity of modern social media, image sharing has become a common way. In order to protect the copyright of images and identify the photographer, many users like to add watermarks to images. In this article, we will introduce how to use the uniapp framework to implement the image watermark function and provide detailed code examples.

uniapp is a cross-platform development framework that can be used to simultaneously develop WeChat applets, H5 pages, Android and iOS applications. To implement the image watermark function, we can draw the watermark through the canvas component in uniapp and merge it into the original image.

First, we need to create a page in the uniapp project to display the image watermark effect. In the layout of the page, we can use the canvas component provided by uniapp to draw pictures and watermarks. The following is a simple example:

<template>
  <view class="container">
    <canvas class="canvas" id="myCanvas" @canvasId="onCanvasId"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canvasId: "",
      imageUrl: "",
      watermarkText: "Watermark",
    };
  },
  methods: {
    // 获取canvas的id
    onCanvasId(e) {
      this.canvasId = e.mp.detail.canvasId;
      this.drawImage();
    },
    // 绘制图片和水印
    drawImage() {
      const ctx = uni.createCanvasContext(this.canvasId, this);
      const canvasWidth = 300;
      const canvasHeight = 300;

      // 绘制图片
      ctx.drawImage(this.imageUrl, 0, 0, canvasWidth, canvasHeight);

      // 绘制水印
      ctx.setFontSize(16);
      ctx.setFillStyle("rgba(255, 255, 255, 0.5)");
      ctx.setTextBaseline("middle");
      ctx.setTextAlign("center");
      ctx.fillText(
        this.watermarkText,
        canvasWidth / 2,
        canvasHeight / 2
      );

      ctx.draw(false, () => {
        // 将canvas转换为图片
        uni.canvasToTempFilePath(
          {
            canvasId: this.canvasId,
            success: (res) => {
              // 保存水印图片
              this.saveImage(res.tempFilePath);
            },
            fail: () => {
              console.log("canvasToTempFilePath failed");
            },
          },
          this
        );
      });
    },
    // 保存图片
    saveImage(path) {
      uni.saveImageToPhotosAlbum({
        filePath: path,
        success: () => {
          uni.showToast({
            title: "图片保存成功",
            icon: "success",
            duration: 2000,
          });
        },
        fail: () => {
          uni.showToast({
            title: "图片保存失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
  },
  mounted() {
    // 设置原始图片路径
    this.imageUrl = "xxx";
  },
};
</script>

In the above code, we obtain the id of the canvas component through the onCanvasId method, and then call the drawImage method to draw pictures and watermarks on the canvas. To draw an image, you need to use the ctx.drawImage method, and to draw a watermark, you need to use the ctx.fillText method. Finally, we can convert the canvas to a temporary file path through the uni.canvasToTempFilePath method, and then use the uni.saveImageToPhotosAlbum method to save the watermark image to the album.

It should be noted that in actual development, we can pass the path and text content of images and watermarks as parameters into the component to achieve more flexible functions.

Summary:

This article introduces how to use uniapp to implement the image watermark function, and provides detailed code examples. By using the canvas component, we can draw a watermark on the image and save it as a new image. I hope this article will be helpful to developers who need to implement the image watermark function. If you have any questions, please leave a message for discussion.

The above is the detailed content of Use uniapp to implement image watermark function. For more information, please follow other related articles on the PHP Chinese website!