html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片

 更新時間:2020-01-12 19:00:24   作者:佚名   我要評論(0)

如何使用JS截取HTML頁面為圖片呢,下面為大家介紹一款JS截圖插件html2canvas.js
html2canvas.js 能夠實現在用戶瀏覽器端直接對整個或部分頁面進行截屏。
html2can

如何使用JS截取HTML頁面為圖片呢,下面為大家介紹一款JS截圖插件html2canvas.js

html2canvas.js 能夠實現在用戶瀏覽器端直接對整個或部分頁面進行截屏。

html2canvas.js可以將當頁面渲染成一個Canvas圖片,通過讀取DOM并將不同的樣式應用到這些元素上實現。

它不需要來自服務器任何渲染,整張圖片都是在客戶端瀏覽器創建。當

瀏覽器不支持Canvas時,將采用Flashcanvas或ExplorerCanvas技術代替實現。

以下瀏覽器能夠很好的支持該腳本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的瀏覽器。

基本語法

html2canvas(element, options);
html2canvas(document.body, {
 onrendered: function(canvas) {
  var url = canvas.toDataURL();//圖片地址
  document.body.appendChild(canvas);
 },
 width: 300,
 height: 300

或者使用ES6的promise

//兩個參數:所需要截圖的元素id,截圖后要執行的函數, canvas為截圖后返回的最后一個canvas html2canvas(document.getElementById('id')).then(function(canvas) {document.body.appendChild(canvas);});

html2canvas基本參數說明

參數名稱 類型 默認值 描述
allowTaint boolean false Whether to allow cross-origin images to taint the canvas---允許跨域
background string #fff Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景顏色,如果沒有設定默認透明
height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度設定
letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used.---在設置了字間距的時候有用
logging boolean false Whether to log events in the console.---在console.log()中輸出信息
proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地址
taintTest boolean true Whether to test each image if it taints the canvas before drawing them---是否在渲染前測試圖片
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---圖片加載延遲,默認延遲為0,單位毫秒
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas寬度
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--這個我也不知道是干嘛的

例子

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>html2canvas example</title>
  <script type="text/javascript" src="http://files.jb51.net/file_images/article/202001/2020112153748862.jpg?2020012153850" alt="" />

截圖效果如下:

最后附上html2canvas官網鏈接

官網

Github

您可能感興趣的文章:

  • vue 使用html2canvas將DOM轉化為圖片的方法
  • js使用html2canvas實現屏幕截取的示例代碼
  • Javascript保存網頁為圖片借助于html2canvas庫實現
  • JavaScript實現網頁截圖功能
  • js+HTML5實現視頻截圖的方法
  • javascript在網頁中實現讀取剪貼板粘貼截圖功能
  • js實現截圖保存圖片功能的代碼示例
  • JavaScript+html5 canvas實現本地截圖教程
  • JS打開攝像頭并截圖上傳示例
  • JS實現div模塊的截圖并下載功能
  • JS實現預加載視頻音頻/視頻獲取截圖(返回canvas截圖)
  • javascript實現粘貼qq截圖功能(clipboardData)

相關文章

  • html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片

    html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片

    如何使用JS截取HTML頁面為圖片呢,下面為大家介紹一款JS截圖插件html2canvas.js html2canvas.js 能夠實現在用戶瀏覽器端直接對整個或部分頁面進行截屏。 html2can
    2020-01-12
  • golang并發編程的實現

    golang并發編程的實現

    go main函數的執行本身就是一個協程,當使用go關鍵字的時候,就會創建一個新的協程 channel channel 管道,用于在多個協程之間傳遞信號 無緩存管道 當對無
    2020-01-12
  • python opencv實現信用卡的數字識別

    python opencv實現信用卡的數字識別

    本項目利用python以及opencv實現信用卡的數字識別 前期準備 導入工具包 定義功能函數 模板圖像處理 讀取模板圖像 cv2.imread(img) 灰度化處理 cv2
    2020-01-12
  • 2019年度web前端面試題總結(主要為Vue面試題)

    2019年度web前端面試題總結(主要為Vue面試題)

    畢業之后就在一直合肥小公司工作,沒有老司機、沒有技術氛圍,在技術的道路上我只能獨自摸索。老板也只會畫餅充饑,前途一片迷?床坏饺魏蜗M。于是乎,我果斷辭
    2020-01-12
  • 深入理解redux之compose的具體應用

    深入理解redux之compose的具體應用

    應用 最近給自己的react項目添加redux的時候,用到了redux中的compose函數,使用compose來增強store,下面是我在項目中的一個應用: import {createStore,apply
    2020-01-12
  • Java使用DateTimeFormatter實現格式化時間

    Java使用DateTimeFormatter實現格式化時間

    用掃描器獲取輸入的時間(年月日時分),這個時間的格式是常用的格式,然后格式化這個時間,把格式化的時間輸出到控制臺,可以在控制臺重復輸入時間.格式化的時間參考企業
    2020-01-12
  • Ranorex通過Python將報告發送到郵箱的方法

    Ranorex通過Python將報告發送到郵箱的方法

    Ranorex測試報告如何發送到郵箱在網上看了下,其實可以通過在Ranorex上或者VS調用編寫發送郵箱代碼就可以執行發送了,RX主要涉及到的開發語言是C++或者.NET。但是我
    2020-01-12
  • 通過實例解析JMM和Volatile底層原理

    通過實例解析JMM和Volatile底層原理

    這篇文章主要介紹了通過實例解析JMM和Volatile底層原理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 JMM和
    2020-01-11
  • 淺談pytorch卷積核大小的設置對全連接神經元的影響

    淺談pytorch卷積核大小的設置對全連接神經元的影響

    3*3卷積核與2*5卷積核對神經元大小的設置 #這里kerner_size = 2*5 class CONV_NET(torch.nn.Module): #CONV_NET類繼承nn.Module類 def __init__(self): super(
    2020-01-11
  • python如何獲取apk的packagename和activity

    python如何獲取apk的packagename和activity

    這篇文章主要介紹了python如何獲取apk的packagename和activity,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-01-11

最新評論

北京pk10直播盛源