H5\uniapp图片添加水印

Autumn_yun

于 2022-06-23 14:50:09 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/Autumn_yun/article/details/125426877

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')
          // 设置填充字号和字体，样式