前端将页面转换为图片保存至本地（html2canvas）

苡然_

已于 2023-02-14 18:44:47 修改

阅读量1.7k

点赞数 1

文章标签：前端 xhtml javascript

于 2023-02-14 18:35:19 首次发布

本文链接：https://blog.csdn.net/lfqp_/article/details/129031741

版权

该文章展示了如何利用html2canvas插件将HTMLDOM元素转换为canvas，然后将canvas转换为图片并保存到本地。主要方法包括调用html2canvas，配置参数如scale和useCORS，以及处理图片类型和触发文件下载。

摘要由CSDN通过智能技术生成

这里使用的是html2canvas插件，大概就是获取DOM元素，通过html2canvas插件转换为canvas，最后转换为图片保存至本地

 npm install --save html2canvas

直接上代码

<template>
  <div class="app-container canvasImgObj">
    <el-button @click="GenerateImg">保存为图片</el-button>
  </div>
</template>

<script>
//引入
import html2canvas from "html2canvas"
export default {
  name: "Index",
  data() {
    return {

    };
  },
  methods: {
    //转换成图片
    GenerateImg() {
      let canvas = document.querySelector('.canvasImgObj');//先获取要截取页面的DOM
      let that = this;
      html2canvas(canvas,{scale:2,logging:false,useCORS:true}).then(function(canvas) {
        let type = 'png';
        let imgData = canvas.toDataURL(type);
            // 照片格式处理
        let _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        let r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
      };
      imgData = imgData.replace(_fixType(type),'image/octet-stream');
      let filename = "设备地图" + '.' + type;
      that.saveFile(imgData,filename);
      });
    },
    //下载至本地
    saveFile(data, filename){
      let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;
      let event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
    },
  },
};
</script>