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

更新時間：2020年01月12日 15:47:04 作者：58384View

為大家介紹一款JS截圖插件html2canvas.js，它可以通過純JS對瀏覽器端經行截屏,下面就為大家介紹一下html2canvas.js屬性和具體使用方法，并為大家提供了一個實例

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

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

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

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

瀏覽器不支持Canvas時，將采用Flashcanvas或ExplorerCanvas技術代替實現(xiàn)。

以下瀏覽器能夠很好的支持該腳本：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

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

html2canvas基本參數(shù)說明

參數(shù)名稱	類型	默認值	描述
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="html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
 console.log('test');
  html2canvas(document.getElementById('view'), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
   // width: 300,
   // height: 300
  });
}
</script>
<body>
  <div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;">
    <input type="button" value="截圖" onclick="takeScreenshot()">
  </div>
</body>

</html>

效果圖如下：

截圖效果如下：

最后附上html2canvas官網鏈接

官網

Github

您可能感興趣的文章:

javascript canvas API內容整理
在本篇文章里小編給大家分享的是關于javascript canvas API內容整理，有需要的朋友們可以跟著學習參考下。
2020-02-02
JS打印方法的幾種方法
本文主要介紹了JS打印方法的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
關于JavaScript 的事件綜合分析
js下比較常用的方法，事件函數(shù)代碼。
2010-08-08
JS獲取父節(jié)點方法
在Web應用程序特別是Web2.0程序開發(fā)中，經常要獲取頁面中某個元素，然后更新該元素的樣式、內容等。
2009-08-08
js制作網站首頁圖片輪播特效代碼
這篇文章主要為大家詳細介紹了js制作網站首頁圖片輪播特效代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
javascript驗證手機號和實現(xiàn)星號(*)代替實例
在我們日常開發(fā)中經常要驗證客戶輸入的手機號是否正確，有的時候還需要將中間的四位或者前幾位用星號(*)代替，那該如何實現(xiàn)呢？下面跟著小編一起來看看。
2016-08-08
Javascript絕句欣賞一些經典的js代碼
Javascript絕句欣賞一些經典的js代碼整理，學習js的朋友可以參考下
2012-02-02
JavaScript中內置函數(shù)Map()的使用
Map()是JavaScript中內置的一種數(shù)據(jù)結構，它允許您將鍵值對映射到任意類型的值，主要介紹了JavaScript中內置函數(shù)Map()的使用，感興趣的可以了解一下
2023-05-05
BootStrap表單寬度設置方法
這篇文章主要介紹了BootStrap表單寬度設置方法,僅僅是小編日常遇到問題記錄，寫的不好還請見諒，需要的朋友可以參考下
2017-03-03
對layer彈出框中icon數(shù)字參數(shù)的說明介紹
今天小編就為大家分享一篇對layer彈出框中icon數(shù)字參數(shù)的說明介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09