怎么使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片-創(chuàng)新互聯(lián)

小編給大家分享一下怎么使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的鶴山網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

html2canvas.js 能夠?qū)崿F(xiàn)在用戶瀏覽器端直接對整個或部分頁面進(jìn)行截屏。

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

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

瀏覽器不支持Canvas時，將采用Flashcanvas或ExplorerCanvas技術(shù)代替實現(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ù)說明

allowTaintbooleanfalseWhether to allow cross-origin images to taint the canvas---允許跨域backgroundstring#fffCanvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景顏色，如果沒有設(shè)定默認(rèn)透明heightnumbernullDefine the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度設(shè)定letterRenderingbooleanfalseWhether to render each letter seperately. Necessary if letter-spacing is used.---在設(shè)置了字間距的時候有用loggingbooleanfalseWhether to log events in the console.---在console.log()中輸出信息proxystringundefinedUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地址taintTestbooleantrueWhether to test each image if it taints the canvas before drawing them---是否在渲染前測試圖片timeoutnumber0Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---圖片加載延遲，默認(rèn)延遲為0，單位毫秒widthnumbernullDefine the width of the canvas in pixels. If null, renders with full width of the window.---canvas寬度useCORSbooleanfalseWhether 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> <p id="view" > <input type="button" value="截圖" onclick="takeScreenshot()"> </p></body></html>

以上是“怎么使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：怎么使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article26/cspojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、虛擬主機、微信公眾號、網(wǎng)站維護(hù)、商城網(wǎng)站、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容