前端將dom轉換成圖片的方法(使用dom-to-image)

更新時間：2025年01月18日 10:08:27 作者：crazy-三笠

這篇文章主要介紹了使用輕量級的dom-to-image插件將DOM元素轉換為圖片并下載,該插件支持多種圖片格式,如SVG、PNG、JPEG等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、問題描述

在工作的過程中會遇到要將dom變成圖片并下載的問題，剛開始使用的html2canvas進行轉換的，但是我老大告訴我說，咱們做的是面向國外的網(wǎng)頁，插件太大會導致頁面加載慢的問題（國外部分地區(qū)網(wǎng)絡沒有國內這么發(fā)達），就讓我用原生dom或一些比較小的插件，在原生dom下載的時候遇到了context.drawImage(element, 0, 0, width, height)這一方法傳入?yún)?shù)要傳類型HTMLCanvasElement的問題，所以要將一個HTMLElement轉換成HTMLCanvasElement，但是經(jīng)過一些信息的查找，我發(fā)現(xiàn)有個很好用且輕量化的插件，可以完美解決這一問題，所以這里給大家推薦一個輕量級的插件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()
      })

當然也可以進行全局引入

創(chuàng)建一個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 對象。

參數(shù)說明：
- node：要轉換為圖片的 DOM 元素。
- options：可選參數(shù)對象，用于配置轉換選項。
toPng(node: Node, options?: Options): Promise<string>：將 DOM 元素轉換為 PNG 圖片，并返回一個 Promise 對象。

參數(shù)說明：
- node：要轉換為圖片的 DOM 元素。
- options：可選參數(shù)對象，用于配置轉換選項。
toJpeg(node: Node, options?: Options): Promise<string>：將 DOM 元素轉換為 JPEG 圖片，并返回一個 Promise 對象。

參數(shù)說明：
- node：要轉換為圖片的 DOM 元素。
- options：可選參數(shù)對象，用于配置轉換選項。
toBlob(node: Node, options?: Options): Promise<Blob>：將 DOM 元素轉換為 Blob 對象，并返回一個 Promise 對象。

參數(shù)說明：
- node：要轉換為圖片的 DOM 元素。
- options：可選參數(shù)對象，用于配置轉換選項。
toPixelData(node: Node, options?: Options): Promise<Uint8ClampedArray>：將 DOM 元素轉換為像素數(shù)據(jù)，并返回一個 Promise 對象。

參數(shù)說明：
- node：要轉換為圖片的 DOM 元素。
- options：可選參數(shù)對象，用于配置轉換選項。
toCanvas(node: Node, options?: Options): Promise<HTMLCanvasElement>：將 DOM 元素轉換為 Canvas 對象，并返回一個 Promise 對象。

參數(shù)說明：
- node：要轉換為圖片的 DOM 元素。
- options：可選參數(shù)對象，用于配置轉換選項。