通過canvas實現將html的某些元素轉為png圖片

阿新 • • 發佈：2019-01-15

有時候我們需要把html或者某些html元素轉換為圖片，並且支援下載，下面是學習之後的總結，希望能給大家帶來幫助。

所需外掛庫：html2canvas.js、canvas2image.js、base64.js

資源地址：連結: https://pan.baidu.com/s/12hpynzrXtgBZXvYkMqpoFg 密碼: bvvu

思路如下：html2image思路需要獲取的元素的節點-->點選捕獲按扭-->獲取節點內元素資訊-->利用庫檔案html2canvas進行繪製-->繪製成功後點擊下載按鈕-->利用庫檔案canvas2image轉換為img，使用base64對圖片編碼-->下載圖片

所需程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html元素轉canvas並一鍵生成png圖片(支援img圖片元素)</title>
    <!-- html2canvas將Dom節點在Canvas裡邊畫出來 -->
    <script src="../js/html2canvas.min.js"></script>

    <!-- 將canvas圖片儲存成圖片 -->
    <script src="../js/canvas2image.js"></script>
    <script src="../js/base64.js"></script>
    <style>
        p{
            font-size: 15px;
            font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;
        }
        #content{
            border-radius: 3px;
        }
        #btnSave,#Download{
            position: absolute;
            left: 180px;
            top: 540px;
            width: 78px;
            height: 30px;
            background-color: #22b4f6;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            border: none;
        }
        #Download{
            margin-left: 560px;
        }
        .tx,.bt{
            border: 1px solid #999;
            width: 100px;
            height: 20px;
            border-radius: 3px;
        }
        .bt{
            background-color: #22b4f6;
            color: #fff;
            text-align: center;
            border: none;
        }
    </style>
</head>
<body>
<div>html2canvas 只能在伺服器中抓取img，本文可以抓取本地圖片</div>
<div id="content" style="width:500px;height:500px;border:1px solid #22b4f6;float:left;text-align:center; background: #fff;">
    <h2>人物簡介</h2>
    <p>暱稱：wind</p>
    <p>技能：前端 + 後端 + 小程式 + webapp</p>
    <p>語言：html5、php、mysql</p>
    <p>指令碼：javascript</p>
    <p>框架：vue.js、smarty、thinkphp、MUI、WeUI、Bootstrap</p>
</div>
<div style="width:60px;height:302px;float:left;text-align:center;line-height:302px;font-size:30px;color:#22b4f6;">==></div>
<div id="images" style="width:190px;height:302px;float:left;text-align:center;line-height:302px">圖片預覽區</div>
<button id="btnSave">抓取圖片</button><button id="Download">下載圖片</button>
</body>
<script>
    /*生成canvas圖形*/

    // 獲取按鈕id
    var btnSave = document.getElementById("btnSave");
    // 獲取內容id
    var content = document.getElementById("content");
    // 進行canvas生成
    btnSave.onclick = function(){
        html2canvas(content, {
            onrendered: function(canvas) {
                //新增屬性
                canvas.setAttribute('id','thecanvas');
                //讀取屬性值
                // var value= canvas.getAttribute('id');
                document.getElementById('images').innerHTML = '';
                document.getElementById('images').appendChild(canvas);
            }
        });
    }
</script>
<script>
    /*
     * 說明
     * 不支援跨域圖片
     * 不能在瀏覽器外掛中使用
     * 部分瀏覽器上不支援SVG圖片
     * 不支援Flash
     */
    var Download = document.getElementById("Download");
    Download.onclick = function(){
        var oCanvas = document.getElementById("thecanvas");
        console.log(oCanvas);

        /*自動儲存為png*/
        // 獲取圖片資源
        var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
        console.log(img_data1);
        saveFile(img_data1, 'richer.png');


        /*下面的為原生的儲存，不帶格式名*/
        // 這將會提示使用者儲存PNG圖片
        // Canvas2Image.saveAsPNG(oCanvas);
    }
    // 儲存檔案函式
    var saveFile = function(data, filename){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
</script>
</html>

通過canvas實現將html的某些元素轉為png圖片

有時候我們需要把html或者某些html元素轉換為圖片，並且支援下載，下面是學習之後的總結，希望能給大家帶來幫助。所需外掛庫：html2canvas.js、canvas2image.js、base64.js 資源地址：連結: https://pan.baidu.com

用html2canvas和jspdf實現將html轉成pdf下載到本地

解決了下載的圖片會模糊和偏移的問題 <script src="${basePath!}/js/bluebird.js"></script> <script src="${basePath!}/js/jspdf.debug.js"></script>

[效能優化]通過Shell實現將程序負載均衡到CPU多核

有時候，由於架構設計或其他業務本身特點原因，導致有些應用使用CPU很不均衡，所以業務處理集中在一個CPU上，而其它CPU閒得在睡覺。這裡有個簡單的優化方案實現將各個執行緒繫結到到多個CPU，從而實現效能的提高。雖然CPU是一個不錯的思路，但是不是殺手鐗，其效能能提高多少依賴於各個執行緒的效能分佈是

winform中通過FileStream實現將檔案上傳

本例項實現功能：通過OpenFileDialog選擇待上傳的檔案，並將所選檔案的完整路徑繫結到TreeView控間中顯示，然後通過FolderBrowserDialog選擇上傳的檔案路徑，最後通過FileStream的方法將檔案以二進位制流的形式寫入到所選路徑的對應檔案中。其

Delphi通過MSHTML實現一個HTML解析類

(******************************************************)(* 得閒工作室 *)(* 網頁元素操作類庫 *)

通過freemarker模板，使用jsoup將html轉換為word,包含圖片

實現思路：一、製作模板 1、在word中無非三種格式，文字、圖片、表格，目前我所涉及到的業務中只有這三個，其他情況沒涉及到沒研究，首先需要準備一個模板檔案，即xml格式的模板，通過開啟一個空白的word文件，另存為xml檔案，即可得到一個空白的word模板（可使用not

將html或者div轉換為圖片

轉載出處：https://blog.csdn.net/huwei2003/article/details/79761580 我想實現這樣的功能：在一個頁面展示多個html頁面的圖片看到一個有用的部落格，特此記錄一下，以備後用今天要分享的是用html2canvas根據

PHP將HTML轉換成各種格式圖片或PDF

安裝軟體清單 libwkhtmltox linux下的webkit核心 phpwkhtmltox php擴充套件，可呼叫webkit核心將網頁轉換成各種格式圖片或者pdf font-chinese 中文字型 msyh,Consolas 字型（優雅字型）

js把html頁面列印成png圖片（實測，可用）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ceshi</title> <style>

ffmpeg將rgba資料轉成png圖片

最近在做熱區圖分析，需要對視訊中的一些熱區資訊產生熱區圖，併疊加到視訊背景圖上，主要工作有兩部分： 1.分析熱區資料，生成rgba資料（本文暫時先不講具體實現）； 2.用ffmepg將rgba資料生成png圖（主要講這部分內容）；具體實現程式碼如下： bool sav

javascript將html轉為圖片保存。

canvas () color can 實現 data url pan his js將html轉為圖片主要是通過html2canvas這個插件去操作的。具體實現如下： html部分：  <div id="cont

嵌入式Linux上通過boa服務器實現cgi/html的web上網【轉】

通過 JS 實現簡單的拖拽功能並且可以在特定元素上禁止拖拽

如何 alt targe 但是 mes 並且 mod closed demo 前言關於講解 JS 的拖拽功能的文章數不勝數，我確實沒有必要大費周章再寫一篇重復的文章來吸引眼球。本文的重點是講解如何在某些特定的元素上禁止拖拽。這是我在編寫插件時遇到的問題，其實很多插件的拖

4、通過uiautomatorviewer實現appium元素定位

應該 new 實現 des div git IT webdriver lec 熟悉selenium自動化的小夥伴應該知道WebDriver 提供了八種元素定位方法： idnameclass nametag namelink textpartial link textxpa

HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別

light 參考 utf 嵌入 label 支持列表項 sub idt 1.行內元素 (1)設置寬高無效 (2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間 (3)不會自動進行換行 <html> <head

通過http實現調接口，實現將遠程的數據庫數據插入到本地的數據當中的操作。

使用 nco 靜態頁面 sta 底層 stat user pac end 今天同事給我一個接口，讓我實現將遠程的數據的信息通過http的形式獲取到插入到本地的數據庫當中。（1）簡單的方法是通過ajax傳遞參數，然後在後臺請求數據。（2）通過http請求獲取到數據，然後插

android 開發將view保存為image的實現及將html保存為pdf格式

開發 eight red media try todo file per text 一、將view保存為image public class ImageHelper { 　　///將view保存到bitmap中 public Bitmap createBitm

實現將一維陣列A（下標從1開始）中的元素迴圈右移k位，要求只用一個元素大小的輔助空間

#include<stdio.h>main(){ int n,arrary[50],k,temp; printf("請輸入陣列元素個數:\n"); scanf("%d",&n); for(int i=1;i<=n;i++) scanf

實現將一維數組A（下標從1開始）中的元素循環右移k位，要求只用一個元素大小的輔助空間

維數輔助數組a emp 數組元素移動 scan clu n) #include<stdio.h>main(){ int n,arrary[50],k,temp; printf("請輸入數組元素個數:\n"); scanf("%d",&n); for

[Python程式設計]綜合性實驗: Java原始碼高亮實現將Java程式碼轉換為html

前言這個是大三下學期的Java課程設計,目前重構完成了程式碼轉換並輸出的部分.暫時還沒有打算完成視覺化介面. 程式碼不長,加起來也就100行左右(再次感受到Python的精簡),實現了對註釋,關鍵字,字串,一些運算子的高亮. 程式碼實現 import re cl

通過canvas實現將html的某些元素轉為png圖片

相關推薦