uniapp下载图片时如何加水印

2024-01-05 10:03:51 阅读：58 来源： 互联网

标签：

在Uni-app中，你可以使用一个插件或自行实现加水印的功能。

使用插件：你可以搜索Uni-app的插件市场，寻找支持图片加水印的插件，比如"uni-create-canvas"插件。安装插件后，你可以根据插件的文档和示例代码，实现添加水印的功能。
自行实现：如果没有找到适合的插件，你可以自己实现加水印的功能。下面是一个简单的实现过程：

首先，创建一个画布(canvas)，用于绘制图片和水印。在Uni-app中，你可以使用<canvas>组件。

<template>
  <canvas id="canvas" type="2d" style="width: 200px; height: 200px;"></canvas>
</template>

HTML

然后，在页面的mounted生命周期函数中，获取到canvas的上下文(context)，并绘制图片和水印。

<script>
export default {
  mounted() {
    const ctx = uni.createCanvasContext('canvas', this);
    const imgUrl = 'http://example.com/image.jpg'; // 图片链接
    const watermarkText = 'Watermark'; // 水印文本

    const imgPromise = new Promise((resolve, reject) => {
      uni.getImageInfo({ // 获取图片信息
        src: imgUrl,
        success: (res) => {
          resolve(res.path);
        },
        fail: reject
      });
    });

    const drawCanvas = (imgPath) => {
      ctx.drawImage(imgPath, 0, 0, 200, 200); // 绘制图片
      
      ctx.setFontSize(16); // 设置水印字体大小
      ctx.setFillStyle('rgba(0, 0, 0, 0.5)'); // 设置水印颜色
      ctx.fillText(watermarkText, 10, 190); // 绘制水印文本

      ctx.draw(); // 将图像绘制到画布上
    };

    imgPromise.then(drawCanvas).catch((err) => {
      console.error(err);
    });
  }
}
</script>

JavaScript

以上代码使用uni.getImageInfo()获取图片信息，再使用ctx.drawImage()绘制图片，最后使用ctx.fillText()方法添加水印文本。请根据实际情况修改绘制的位置、大小和样式。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uniapp下载图片时如何加水印