快捷導(dǎo)航

Vue使用html2canvas實(shí)現(xiàn)截取圖片并保存

更新時(shí)間：2023年12月21日 15:28:34 作者：我是ed

html2canvas是一個(gè)JavaScript庫(kù),它可以將HTML元素轉(zhuǎn)換為Canvas元素本文將介紹一下Vue如何使用html2canvas實(shí)現(xiàn)截取圖片并保存功能,需要的可以參考下

html2canvas 簡(jiǎn)介

html2canvas是一個(gè)JavaScript庫(kù)，它可以將HTML元素轉(zhuǎn)換為Canvas元素。具體來(lái)說(shuō)，它可以將整個(gè)頁(yè)面或特定的HTML元素轉(zhuǎn)換為一幅圖像，這對(duì)于創(chuàng)建屏幕截圖、生成PDF文件或在上創(chuàng)建可編輯的圖像非常有用。

html2canvas 安裝

安裝 html2canvas 很簡(jiǎn)單，只需要一個(gè)簡(jiǎn)單的命令即可。

npm install html2canvas --save

等待命令執(zhí)行完成就可以了。

html2canvas 使用

使用的時(shí)候也非常的方便。首先在需要使用的地方進(jìn)行引入。

import html2canvas from 'html2canvas'

在 Vue 組件中使用 html2canvas 將 HTML 元素轉(zhuǎn)換為 canvas：

methods: {  
  convertToCanvas() {  
    const element = this.$refs.element // 獲取要轉(zhuǎn)換的HTML元素  
    html2canvas(element).then(canvas => {  
      // 在這里可以對(duì)canvas進(jìn)行操作，例如將其添加到頁(yè)面中或保存為圖片等  
      // 例如：this.$refs.canvasContainer.appendChild(canvas)  
    })  
  }  
}

在模板中添加要轉(zhuǎn)換的HTML元素和調(diào)用方法的引用：

<template>  
  <div>  
    <div ref="element">要轉(zhuǎn)換的HTML元素</div>  
    <button @click="convertToCanvas">轉(zhuǎn)換為Canvas</button>  
    <div ref="canvasContainer"></div>  
  </div>  
</template>

當(dāng)用戶點(diǎn)擊按鈕時(shí)，convertToCanvas方法將被調(diào)用，它將獲取要轉(zhuǎn)換的HTML元素并使用html2canvas將其轉(zhuǎn)換為canvas。轉(zhuǎn)換完成后，可以在then回調(diào)函數(shù)中對(duì)canvas進(jìn)行操作，例如將其添加到頁(yè)面中或保存為圖片等。

案例：保存縮略圖

之前在項(xiàng)目里面寫過(guò)一個(gè)功能，就是把頁(yè)面保存成縮略圖展示。需要獲取這個(gè)頁(yè)面的截圖，然后把截圖數(shù)據(jù)發(fā)送給后端，后端保存起來(lái)，然后查詢列表的時(shí)候后端返回保存的縮略圖進(jìn)行展示。就是引用上面的步驟：

    // 獲取截圖
    getPicture() {
      html2canvas(this.$refs.panelPage).then(canvas => {
        // 獲取生成的圖片的url,并設(shè)置為png格式
        const imgUrl = canvas.toDataURL("images/png");
        let base64Data = imgUrl.split(",")[1];
        let binaryData = atob(base64Data);
        let uint8Array = new Uint8Array(binaryData.length);
        for (let i = 0; i < binaryData.length; i++) {
          uint8Array[i] = binaryData.charCodeAt(i);
        }
        // 獲取blob文件流
        let blob = new Blob([uint8Array], { type: "image/png" });
        // 文件流轉(zhuǎn)文件
        let file = new File([blob], "filename.png", {
          type: "image/png",
        });
        let fd = new FormData()
        fd.append('file', file)
        
        // 請(qǐng)求后端數(shù)據(jù)接口
        coverUpload(fd) 
      })
    },

上面獲取了截圖之后調(diào)用請(qǐng)求接口的方法就OK了。

這樣就可以把頁(yè)面的截圖獲取下來(lái)，然后保存縮略圖到后端。但是在實(shí)際使用上發(fā)現(xiàn)一個(gè)大問(wèn)題，就是我引用的網(wǎng)絡(luò)圖片獲取截取不下來(lái)。于是找了一下原因：是因?yàn)榭缬虻膯?wèn)題導(dǎo)致覺(jué)得不安全，就沒(méi)有截取。

解決這個(gè)問(wèn)題也很簡(jiǎn)單，配置一下允許跨域，上面代碼改一下：

    // 獲取截圖
    getPicture(id) {
      html2canvas(this.$refs.panelPage, {
        useCORS: true,  // 開(kāi)啟跨域
      }).then(canvas => {
        // 獲取生成的圖片的url,并設(shè)置為png格式
        const imgUrl = canvas.toDataURL("images/png");
        let base64Data = imgUrl.split(",")[1];
        let binaryData = atob(base64Data);
        let uint8Array = new Uint8Array(binaryData.length);
        for (let i = 0; i < binaryData.length; i++) {
          uint8Array[i] = binaryData.charCodeAt(i);
        }
        // 獲取blob文件流
        let blob = new Blob([uint8Array], { type: "image/png" });
        // 文件流轉(zhuǎn)文件
        let file = new File([blob], "filename.png", {
          type: "image/png",
        });
        let fd = new FormData()
        fd.append('file', file)
        // 請(qǐng)求后端數(shù)據(jù)接口
        coverUpload(id, fd)
      })
    },

主要就是這一句代碼：useCORS: true。

但是發(fā)現(xiàn)有些還不行，為啥呢，因?yàn)樗枰?wù)端開(kāi)啟跨域 response.setHeader("Access-Control-Allow-Origin","*") ;。如果是自己的服務(wù)器的話，那改一下 nginx 的代理配置就可以了。

location /imgSource/ {
	# 加上這三行就可以了
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers X-Requested-With;
	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
	
	autoindex on;
	alias C:/Users/11466/Desktop/serve/classe/image/;
}

這樣就能截取下來(lái)了，反正我是成功了。

到此這篇關(guān)于Vue使用html2canvas實(shí)現(xiàn)截取圖片并保存的文章就介紹到這了,更多相關(guān)Vue html2canvas截圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: