1.首先是跨域問題
最近項(xiàng)目中有一個(gè)功能侨拦，是實(shí)現(xiàn)一個(gè)拼圖功能殊橙，然后使用到了html2canvas這個(gè)庫(kù)，在使用的過程中遇到了跨域問題
主要是canvas的todataurl這個(gè)方法狱从，不能拿到別的域名下的資源
因?yàn)榫W(wǎng)站是用的php做的膨蛮，這里就記錄一下php的方式
我們需要把html2canvasproxy.php 這個(gè)腳本放到一個(gè)指定文件夾，然后配置"proxy":"/lib/html2canvas/html2canvasproxy.php"
var ele = document.getElementById('container');
html2canvas(ele,{
"proxy":"/lib/html2canvas/html2canvasproxy.php",//跨域支持
background : '#ffffff',
onrendered : function(canvas){
var img = canvas.toDataURL("image/jpeg");
window.open(img);
}
});
2.如果現(xiàn)在還不行季研，可以直接在瀏覽器里面訪問這個(gè)腳本文件
例如:http://www.domain.com/html2canvasproxy.php 查看提示信息
我這邊后面把timeout改小了敞葛，改為了10
3.再一個(gè)問題就是，如果當(dāng)前要截取的區(qū)域在可視區(qū)域之外训貌，截取會(huì)丟失
例如我如果要截取的是下面的區(qū)域
如果我現(xiàn)在滾動(dòng)了滾動(dòng)條制肮，導(dǎo)致當(dāng)前區(qū)域有一部分在可視區(qū)域外了冒窍，例如下圖
截取出來(lái)的圖片就是下面這樣了，可視區(qū)域之外的地方就丟失了
為了解決這個(gè)問題豺鼻，我就手動(dòng)把滾動(dòng)條移動(dòng)到頂部了$("body,html").scrollTop(0);综液，把當(dāng)前需要截取的區(qū)域給全部顯示全，然后再執(zhí)行html2canvas方法
4.當(dāng)在生成圖片的時(shí)候儒飒，我們切換了頁(yè)面谬莹，有可能生成的圖會(huì)是一張空白
我的理解是，當(dāng)我生成的時(shí)候桩了，如果切換了頁(yè)面附帽，有可能導(dǎo)致背景色覆蓋到生成的圖片上，看起來(lái)就像是一張空白圖井誉，我是直接把背景去掉就解決了蕉扮。
html2canvas
