[JavaScript知识库]vue - 实现对图片添加水印和截图的功能

vue中使用cavans对图片添加水印 和 使用html2canvas.js实现图片的截图功能

1，选择上传一张图片，使用cavans对其添加水印
我这里使用的是vant组件上传图片，你们也可以使用原生的input上传图片，然后拿到资源句柄；
效果图如下：
水印是在左下角

代码如下：
大家主要看afterRead(file) 方法即可，其中需要注意的是：
1，形参file是拿到的图片的base64格式和其他的一些信息；
2， 把信息给打 this.base64AddWaterMaker（）这个方法进行操作；
3，canvas.getContext(‘2d’);创建了一个2d的画布；
4，img.onload（）方法是一个异步加载的方法；
5，toDataURL()方法把图形转变成base64编码格式的png

<template>
  <div>
    <h1>cavans实现截图</h1>
    <p>用户选择一张图片进行添加水印并截图</p>
    <!--  <van-uploader :after-read="afterRead" />-->
    <van-uploader :after-read="afterRead"> <van-button icon="plus" type="primary" size="small">上传文件</van-button></van-uploader>
    <van-button type="primary" size="small" class="del" @click="delImg">删除图片</van-button>
    <van-button type="primary" size="small" class="del" @click="screenShot">图片截图</van-button>
    <van-button type="primary" size="small" class="del" @click="jumpTo">跳转静态路由</van-button>

    <div class="preview" v-if="true">
      <div class="perview-box">
        <img :src="imgBase64" alt="" id="img" />
      </div>
    </div>
  </div>
</template>
<script>

// 引入截图所需要的依赖  下载地址为：https://blog-static.cnblogs.com/files/lyt520/html2canvas.min.js
import html2canvas from '../../plugins/html2canvas.js';
export default {
  components: {},
  data() {
    return {
      // 图片的base编码
      imgBase64: '',
      // 水印配置项
      waterMakeConfig: {
        font: 'microsoft yahei', //字体
        textArray: ['-新节', '2021/11/26 16:44'], //水印文本内容，允许数组最大长度3 即：3行水印

      },
    };
  },
  // 计算属性
  computed: {},
  // 监听属性
  watch: {},
  created() {},
  mounted() {},
  methods: {

    // 图片上传完成的操作
    afterRead(file) {
      // 下面是给图片添加水印
      try {
        this.base64AddWaterMaker(file.content, this.waterMakeConfig).then((res) => {
          这里可以把添加水印后的文件传给后端，我这里只是举例并没有做
          console.log("res",res);
        });
      } catch (error) {
        console.log('error:', error);
      }
    },

    // 给图片添加水印
    base64AddWaterMaker(base64Img, waterMakeConfig) {
      // 保留this指向 后面会用到的
      let _this = this;
      return new Promise((resolve, reject) => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.crossOrigin = 'Anonymous'; // 图片加载的过程中允许出现跨域
        // 先有src属性才会触发 onload函数
        img.src = base64Img;
        // 异步加载
        img.onload = function () {
          // 注意img.onload方法是异步的
          console.log('img.width', img.width);
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.font = `50px Georgia`;
          // 以左上角为坐标原点 进行绘制图像
          ctx.drawImage(img, 0, 0, img.width, img.height);
          ctx.fillText(waterMakeConfig.textArray[0], img.width * 0.05, img.height * 0.8); //在图片上添加字体
          ctx.fillText(waterMakeConfig.textArray[1], img.width * 0.05, img.height * 0.85);

          // 设置渐变色
          // var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
          // gradient.addColorStop(0, 'red');
          // gradient.addColorStop(1, 'yellow');
          ctx.fillStyle = '#fff';

          let resultBase64 = canvas.toDataURL('image/png'); // 也是生成的base64格式的
          if (!resultBase64) {
            reject();
          } else {
            _this.imgBase64 = resultBase64;
            resolve(resultBase64);
          }
        };
      });
    },
    // 删除图片
    delImg() {
      this.imgBase64 = null;
    },
    // 测试动态路由 点击跳转动态路由页面 并传参
    jumpTo() {
      this.$router.push({ path: '/routers/123' });
    },
     // 图片截图 使用了html2canvas插件
    screenShot() {
      if(!this.imgBase64){
        return alert("请先上传一张图片！")
      }
      // 获取截取的元素 这里直接获取img
      const imgEl = document.getElementById('img');
      html2canvas(imgEl, {
        scale: window.devicePixelRat, //设备像素比
        backgroundColor: null, //设置截图的背景色
        allowTaint: false, //允许跨域（图片跨域相关）
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        taintTest: true, //是否在渲染前测试图片
      }).then((canvas) => {
        // 导出图像
        let url = canvas.toDataURL('image/png', 1.0);
        var saveLink = document.createElement('a'); // 创建a链接
        saveLink.href = url;
        saveLink.download = 'downLoad.png'; // 下载的图片名称
        saveLink.click();
      });
    },
  },
};
</script>

<style lang="scss" src="./cavans.scss" scoped></style>

2，图片截图功能
2,1 图片截图功能需要引入一个插件，插件下载地址为：
https://blog-static.cnblogs.com/files/lyt520/html2canvas.min.js
2,2 下载完成后放到一个工具文件夹中 然后引入：

2.3 然后在 methods里面 新增一个screenShot（）方法即可完成截图功能 代码如下：

 // 图片截图 使用了html2canvas插件
    screenShot() {
      if(!this.imgBase64){
        return alert("请先上传一张图片！")
      }
      // 获取截取的元素 这里直接获取img
      const imgEl = document.getElementById('img');
      html2canvas(imgEl, {
        scale: window.devicePixelRat, //设备像素比
        backgroundColor: null, //设置截图的背景色
        allowTaint: false, //允许跨域（图片跨域相关）
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        taintTest: true, //是否在渲染前测试图片
      }).then((canvas) => {
        // 导出图像
        let url = canvas.toDataURL('image/png', 1.0);
        var saveLink = document.createElement('a'); // 创建a链接
        saveLink.href = url;
        saveLink.download = 'downLoad.png'; // 下载的图片名称
        saveLink.click();
      });
    },

3，css代码如下：

.container{
    width: 402px;
    height: 300px;
    background:#ccc;
    border: 1px solid red;  
    margin: 0 auto;     
}
// 预览的盒子
.perview-box{
    width: 402px;
    height: 400px;
    border: 1px solid;
    margin-top: 10px;
    #img{
        display: inline-block;
        width: 400px;
        
    }
}
.del{
    margin-left: 20px;
}