H5\uniapp图片添加水印

最新推荐文章于 2025-10-22 11:32:13 发布

原创最新推荐文章于 2025-10-22 11:32:13 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

uniapp 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在H5和uniapp中实现图片水印功能。通过uni.chooseImage选取图片，uni.getImageInfo获取图片信息，然后使用uni.createCanvasContext创建画布并设置水印文字，包括时间、用户名和地理位置。最后，将处理后的图片保存为新的临时文件路径。

H5## 标题

图片加水印

	</div>
</body>
<script>
    function blobToImg(blob) {
        return new Promise((resolve, reject) => {
          let reader = new FileReader()
          reader.addEventListener('load', () => {
            let img = new Image()
            img.src = reader.result
            img.addEventListener('load', () => resolve(img))
          })
		  console.log(blob)
          reader.readAsDataURL(blob)
        })
      }
    
      function imgToCanvas(img) {
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)
        return canvas
      }
    
      function watermark(canvas, text) {
        return new Promise((resolve, reject) => {
          let ctx = canvas.getContext('2d')
          // 设置填充字号和字体，样式
          ctx.font = "24px 宋体"
          ctx.fillStyle = "#FFF"
          // 设置右对齐
          ctx.textAlign = 'right'
          // 在指定位置绘制文字，这里指定距离右下角20坐标的地方
		  let chr = text.split("")
		  let temp = ""
		  let row = []
		  console.log(chr)
		  for (let a = 0; a<chr.length;a++){
			  if( ctx.measureText(temp).width < 220 && ctx.measureText(temp+(chr[a])).width <= 220){//220水印宽度
				  temp += chr[a];
			  }else{
				  row.push(temp);
				  temp = chr[a];
			  }
			  console.log(temp,chr[a])
		  }
		  row.push(temp)
		  console.log(row)
		  for(let b=0;b<row.length;b++){
			  ctx.fillText(row[b], canvas.width - 20, (canvas.height - 150)+(b+1)*30)//每行字体y坐标间隔30
		  }
          // ctx.fillText(row[b], canvas.width - 20, canvas.height - 20)
          canvas.toBlob(blob => resolve(blob))
        })
      }
    
      function imgWatermark(dom, text) {
        let input = document.createElement('input')
        input.setAttribute('type', 'file')
        input.setAttribute('accept', 'image/*')
        input.onchange = async () => {
		console.log(input.files[0])
		let img = await blobToImg(input.files[0])
		let canvas = imgToCanvas(img)
		let blob = await watermark(canvas, text)
		let newImage = await blobToImg(blob)
		dom.appendChild(newImage)
	  }
        dom.appendChild(input)
      }
    
      let dom = document.querySelector('#container')
	  console.log(dom)
      imgWatermark(dom, '            16：302022/06/22 星期三我在这里')
</script>

uniapp