前端将dom转换成图片

一、问题描述

在工作的过程中会遇到要将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 =falsenewVue({render:h=>h(App),}).$mount('#app')

三、dom-to-image相关方法

1. toSvg(node: Node, options?: Options): Promise<string>：将 DOM 元素转换为 SVG 图片，并返回一个 Promise 对象。参数说明：- node：要转换为图片的 DOM 元素。- options：可选参数对象，用于配置转换选项。
2. toPng(node: Node, options?: Options): Promise<string>：将 DOM 元素转换为 PNG 图片，并返回一个 Promise 对象。参数说明：- node：要转换为图片的 DOM 元素。- options：可选参数对象，用于配置转换选项。
3. toJpeg(node: Node, options?: Options): Promise<string>：将 DOM 元素转换为 JPEG 图片，并返回一个 Promise 对象。参数说明：- node：要转换为图片的 DOM 元素。- options：可选参数对象，用于配置转换选项。
4. toBlob(node: Node, options?: Options): Promise<Blob>：将 DOM 元素转换为 Blob 对象，并返回一个 Promise 对象。参数说明：- node：要转换为图片的 DOM 元素。- options：可选参数对象，用于配置转换选项。
5. toPixelData(node: Node, options?: Options): Promise<Uint8ClampedArray>：将 DOM 元素转换为像素数据，并返回一个 Promise 对象。参数说明：- node：要转换为图片的 DOM 元素。- options：可选参数对象，用于配置转换选项。
6. toCanvas(node: Node, options?: Options): Promise<HTMLCanvasElement>：将 DOM 元素转换为 Canvas 对象，并返回一个 Promise 对象。参数说明：- node：要转换为图片的 DOM 元素。- options：可选参数对象，用于配置转换选项。

其中，

Options

参数是一个可选的配置对象，用于设置转换选项。以下是一些常用的选项：

• width：输出图像的宽度，默认值为元素的实际宽度。
• height：输出图像的高度，默认值为元素的实际高度。
• style：要应用于元素的样式对象。
• filter：要应用于元素的 CSS 滤镜。
• bgcolor：输出图像的背景颜色，默认值为透明。
• quality：输出图像的质量，仅适用于 JPEG 格式，默认值为 0.92。