vue2给后端返回的图片添加水印

最新推荐文章于 2024-04-12 08:54:12 发布

前端小金丝

最新推荐文章于 2024-04-12 08:54:12 发布

阅读量709

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ljb376766764/article/details/126462906

版权

如果后端未解决跨域可能无法实现会报跨域的错误

在组件的生命周期methods中定义这些方法在mounted中调用

图片在页面中显示就会有水印

<template>
  <div id="app">
    <div id="container">
   
      <div class="preview" ref="preview"></div>
	  <img :src="src1" alt="">
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      text: '1231546',
      src1: 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'
    };
  },
  mounted () {
    this.getBase64FromImageURL(this.src1, async (base64URL) => {
      console.log(base64URL);
      const imgURL = this.getFileFromBase64(base64URL, 'imgName');
      console.log(imgURL);
      let img = await this.blobToImg(imgURL)
      let canvas = this.imgToCanvas(img)
	//   传入水印需要的文字
      let blob = await this.watermark(canvas, this.text)
      let newImage = await this.blobToImg(blob)
	  this.src1=newImage.src
    })
  },
  methods: {
    blobToImg (blob) {
      return new Promise((resolve) => {
        let reader = new FileReader()
        reader.addEventListener('load', () => {
          let img = new Image()
          img.src = reader.result
          img.addEventListener('load', () => resolve(img))
        })
        reader.readAsDataURL(blob)
      })
    },
    imgToCanvas (img) {
      console.log(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
    },
    watermark (canvas, text) {
      return new Promise((resolve) => {
        let ctx = canvas.getContext('2d')
        // 设置字号和字体
        ctx.font = "24px 宋体"
        // 设置
        ctx.fillStyle = "#FFC82C"
        // 设置右对齐
        ctx.textAlign = 'right'
        // 在指定位置绘制文字
        ctx.fillText(text, canvas.width - 20, canvas.height - 20)
        // ctx.fillText(text, canvas.width - , canvas.height - )
        ctx.fillText(text, canvas.width - 200, canvas.height - 200)

        canvas.toBlob(blob => resolve(blob))
      })
    },
    /* 将图片（路径）转换为Base64 */
    getBase64FromImageURL (url, callback) {
      var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var base64URL = canvas.toDataURL('image/png');
        callback(base64URL);
        canvas = null;
      };
      img.src = url;
    },
    /* 将base64转换为file类型 */
    getFileFromBase64 (base64URL, filename) {
      var arr = base64URL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }
  },

}

</script>