前端将dom转换成图片的方法(使用dom-to-image)_Javascript

一、问题描述

在工作的过程中会遇到要将dom变成图片并下载的问题，刚开始使用的html2canvas进行转换的，但是我老大告诉我说，咱们做的是面向国外的网页，插件太大会导致页面加载慢的问题（国外部分地区网络没有国内这么发达），就让我用原生dom或一些比较小的插件，在原生dom下载的时候遇到了context.drawimage(element, 0, 0, width, height)这一方法传入参数要传类型htmlcanvaselement的问题，所以要将一个htmlelement转换成htmlcanvaselement，但是经过一些信息的查找，我发现有个很好用且轻量化的插件，可以完美解决这一问题，所以这里给大家推荐一个轻量级的插件dom-to-image（23kb），这个插件可以不用进行类型转换，直接将dom元素转换成需要的文件格式。

二、dom-to-image的使用

2.1 dom-to-image的安装

在终端输入以下代码进行dom-to-image安装

npm install dom-to-image

2.2 dom-to-image引入

2.2.1 vue项目引入

在需要使用这个插件的页面使用以下代码进行局部引入

import domtoimage from 'dom-to-image';

然后就可以通过以下代码进行图片的转换了

const palgradientgap = document.getelementbyid('element')
      const canvas = document.createelement('canvas')
      canvas.width = element.offsetwidth
      canvas.height = element.offsetheight
      this.domtoimage.topng(element).then(function (canvas) {
        const link = document.createelement('a')
        link.href = canvas
        link.download = 'image.png' // 下载文件的名称
        link.click()
      })

当然也可以进行全局引入

创建一个domtoimage.js文件写入以下代码

import vue from 'vue'; 
import domtoimage from 'dom-to-image'; 
const domtoimageplugin = { 
    install(vue) { 
        vue.prototype.$domtoimage = domtoimage; 
     } 
};
vue.use(domtoimageplugin);

然后再入口文件main.js写入以下代码全局引入插件

import vue from 'vue'
import app from './app.vue' 
import './domtoimage.js'; // 引入全局插件 
vue.config.productiontip = false 
new vue({ render: h => h(app), }).$mount('#app')

三、dom-to-image相关方法

tosvg(node: node, options?: options): promise<string>：将 dom 元素转换为 svg 图片，并返回一个 promise 对象。

参数说明：
- node：要转换为图片的 dom 元素。
- options：可选参数对象，用于配置转换选项。
topng(node: node, options?: options): promise<string>：将 dom 元素转换为 png 图片，并返回一个 promise 对象。

参数说明：
- node：要转换为图片的 dom 元素。
- options：可选参数对象，用于配置转换选项。
tojpeg(node: node, options?: options): promise<string>：将 dom 元素转换为 jpeg 图片，并返回一个 promise 对象。

参数说明：
- node：要转换为图片的 dom 元素。
- options：可选参数对象，用于配置转换选项。
toblob(node: node, options?: options): promise<blob>：将 dom 元素转换为 blob 对象，并返回一个 promise 对象。

参数说明：
- node：要转换为图片的 dom 元素。
- options：可选参数对象，用于配置转换选项。
topixeldata(node: node, options?: options): promise<uint8clampedarray>：将 dom 元素转换为像素数据，并返回一个 promise 对象。

参数说明：
- node：要转换为图片的 dom 元素。
- options：可选参数对象，用于配置转换选项。
tocanvas(node: node, options?: options): promise<htmlcanvaselement>：将 dom 元素转换为 canvas 对象，并返回一个 promise 对象。

参数说明：
- node：要转换为图片的 dom 元素。
- options：可选参数对象，用于配置转换选项。