A. 怎麼把一個text文本轉換成canvas對象
js使用canvas將文字轉換成圖像數據base64，做這個功能的原因是因為在工作中遇到想屏蔽瀏覽器的翻譯功能，使用這個方法將文字轉成了圖片，從而實現屏蔽翻譯的功能
源碼：
/**
*js使用canvas將文字轉換成圖像數據base64
*@param{string}text文字內容"abc"
*@param{string}fontsize文字大小20
*@param{function}fontcolor文字顏色"#000"
*@param{boolean}imgBase64Data圖像數據
*/
textBecomeImg:function(text,fontsize,fontcolor){
varcanvas=document.createElement('canvas');
//小於32字加1小於60字加2小於80字加4小於100字加6
$buHeight=0;
if(fontsize<=32){$buHeight=1;}
elseif(fontsize>32&&fontsize<=60){$buHeight=2;}
elseif(fontsize>60&&fontsize<=80){$buHeight=4;}
elseif(fontsize>80&&fontsize<=100){$buHeight=6;}
elseif(fontsize>100){$buHeight=10;}
//對於gj等有時會有遮擋，這里增加一些高度
canvas.height=fontsize+$buHeight;
varcontext=canvas.getContext('2d');
//擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區域變為透明
context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle=fontcolor;
context.font=fontsize+"pxArial";
//top（頂部對齊）hanging（懸掛）middle（中間對齊）bottom（底部對齊）alphabetic是默認值
context.textBaseline='middle';
context.fillText(text,0,fontsize/2)
//如果在這里直接設置寬度和高度會造成內容丟失,暫時未找到原因,可以用以下方案臨時解決
//canvas.width=context.measureText(text).width;
//方案一：可以先復制內容然後設置寬度最後再黏貼
//方案二：創建新的canvas,把舊的canvas內容黏貼過去
//方案三：上邊設置完寬度後，再設置一遍文字
//方案一：這個經過測試有問題，字體變大後，顯示不全,原因是canvas默認的寬度不夠，
//如果一開始就給canvas一個很大的寬度的話，這個是可以的。
//varimgData=context.getImageData(0,0,canvas.width,canvas.height);//這里先復制原來的canvas里的內容
//canvas.width=context.measureText(text).width;//然後設置寬和高
//context.putImageData(imgData,0,0);//最後黏貼復制的內容
//方案三：改變大小後，重新設置一次文字
canvas.width=context.measureText(text).width;
context.fillStyle=fontcolor;
context.font=fontsize+"pxArial";
context.textBaseline='middle';
context.fillText(text,0,fontsize/2)
vardataUrl=canvas.toDataURL('image/png');//注意這里背景透明的話，需要使用png
returndataUrl;
}
B. javascript 網頁截圖 保存為本地圖片
可以做得到。註明：內容非原創。學習javascript的時候覺得好就保存下來的文章：
html2canvas是一個相當不錯的JavaScript類庫，它使用了html5和css3的一些新功能特性，實現了在客戶端對網頁進行截圖的功
能。html2canvas通過獲取頁面的DOM和元素的樣式信息，並將其渲染成canvas圖片，從而實現給頁面截圖的功能。
它不需要來自伺服器任何渲染，整張圖片都是在客戶端瀏覽器創建。當瀏覽器不支持Canvas時，將採用Flashcanvas或
ExplorerCanvas技術代替實現。以下瀏覽器能夠很好的支持該腳本：Firefox 3.5+, Google Chrome,
Opera新的版本, IE9以上的瀏覽器。
因為每個瀏覽器渲染頁面的方式都不盡相同，所以生成的圖片也不太一樣。雖然它目前還是處理開發階段，但還是很值得期待的。
這個插件依賴於jQuery插件，建議使用最新版的。
兼容性
html2canvas能在以下的瀏覽器中完美的運行。
- Firefox 3.5+
- Chrome
- Opera
- IE9使用方法
1、引入文件
首先我們需要引入jQuery庫和html2canvas插件文件，注意html2canvas插件文件一定要在jQuery的後面引入，不然會報錯。
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
2、調用插件
通過html2canvas方法調用插件，該方法接受兩個參數，第一個為要生成截圖的DOM元素，第二個參數為插件的配置
html2canvas(document.body,{allowTaint:true,taintTest:false,
onrendered:function(canvas){canvas.id="mycanvas";
//document.body.appendChild(canvas);//生成base64圖片數據vardataUrl=
canvas.toDataURL();varnewImg=document.createElement("img");
newImg.src=dataUrl;document.body.appendChild(newImg);}});通過一個回調函數來處理獲取到的截圖。
圖片跨域問題
在網頁的圖片中，如果有跨域圖片，調用toDataURL的時候會出錯
SecurityError: The operation is insecure.
解決方法是在跨域的伺服器上設置header設置為允許跨域請求
access-control-allow-origin: * access-control-allow-credentials: true
官網主頁: http://html2canvas.hertzen.com/
本站文章除註明轉載外，均為本站原創或翻譯，歡迎任何形式的轉載，但請務必註明出處，尊重他人勞動共創和諧網路環境。
轉載請註明：文章轉載自：問說 » html2canvas根據DOM元素樣式實現網頁截圖
本文標題：html2canvas根據DOM元素樣式實現網頁截圖
本文地址：http://www.uedsc.com/html2canvas.html
原文鏈接：http://www.uedsc.com/html2canvas.html