vue项目中利用html-to-image插件将div盒子转化为base64图片,和鼠标滚轮控制图片缩放!!!

        html-to-image 插件是一个能够将div盒子包括里面内容转化成png图片的插件,我个人在项目中遇到使用它的情况是在读取身份证信息之后,将获取到的数据,填入到自己写好的div盒子内,然后转化成图片放入到展示区域内.

        这里只写一个简单的盒子,内部一段文字和一张图片(vue项目中)

首先npm install html-to-image

import { toPng } from 'html-to-image'
export default {
 
  name: 'App',
  data() {
    return {
      imgUrl: '',
      
    }
  },
  methods: {
    getImage() {
      const node = document.querySelector('#img')
      console.log(node)
      toPng(node).then((dataUrl) => {
        // 使用图片数据URL
        console.log(dataUrl);
        this.imgUrl = dataUrl
        //  console.log(this.imgUrl)
      })
        .catch(function (error) {
          console.error('转换错误:', error);
        });
    },
  },
  mounted() {
    this.getImage()
   
  },
 
}

 出来的效果是这样的

         转化的图片是base64格式,把这个赋值给图片的src就可以了,根据需求,设置img标签位置和大小,我这里为了配合图片的大小就设置了auto,小伙伴们可以可以自己试试,

        注意点:toPng函数.then和.catch内部的回调函数,尽量都用箭头函数,因为大部分情况下我们会访问data内的变量,如果用function函数不访问data内变量时没有问题,访问的话因为this指向的问题,会导致我们没有办法访问到!!!

        拓展点:给生成的图片添加鼠标滚轮缩放功能!

        首先要确定的是图片的缩放是控制style中transform属性,通过给scale赋值来实现我们想要的缩放功能.

在methods中添加处理方法

methods:{
    handleWheel(event) {
      // console.log(event)
      event.preventDefault();
 // event.preventDefault()是一个用于阻止事件的默认行为的方法。在这种情况下，我们使用event.preventDefault()来阻止鼠标滚轮事件的默认行为，以避免页面滚动。
      const imgElement = this.$refs.image;
     
      // 通过鼠标滚轮的deltaY值来判断滚动方向
      const deltaY = event.deltaY > 0 ? -1 : 1;

      // 根据滚动方向来改变缩放级别
      this.scale += deltaY * 0.1;

      // 设置新的缩放级别
      imgElement.style.transform = `scale(${this.scale})`;
    }
}

在data中定义scale

 data() {
    return {
      imgUrl: '',
    
      scale: 1 ,
    }
  },

在img标签内添加wheel事件处理就好了

然后运行就可以实现缩放功能了,小伙伴们可以试一下