快捷導(dǎo)航

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

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

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

一、問題描述

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

二、dom-to-image的使用

2.1 dom-to-image的安裝

在終端輸入以下代碼進(jìn)行dom-to-image安裝

npm install dom-to-image

2.2 dom-to-image引入

2.2.1 vue項(xiàng)目引入

在需要使用這個(gè)插件的頁面使用以下代碼進(jìn)行局部引入

import domToImage from 'dom-to-image';

然后就可以通過以下代碼進(jìn)行圖片的轉(zhuǎn)換了

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()
      })

當(dāng)然也可以進(jìn)行全局引入

創(chuàng)建一個(gè)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相關(guān)方法

toSvg(node: Node, options?: Options): Promise<string>：將 DOM 元素轉(zhuǎn)換為 SVG 圖片，并返回一個(gè) Promise 對(duì)象。

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

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

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

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

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

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