最近項目需要，正好多看了一下，下面就是一些記錄，日積月累第一次。。。
1.需求
爲了生成關係圖譜，選擇力導向圖(force)，在D3.js和echarts.js中選擇了D3.js(沒有對比過)來實現力導向圖。
利用D3.js將數據捆綁起來，在前臺div中生成svg（D3.js也可以生成canvas）
此時需要把關係圖譜也生成在pdf中，所以把圖譜（tupu.html()）保存成圖片（var img = new Image();），創建一個canvas（createElement('canvas')）將圖譜生成的圖片放入canvas中（context.drawImage(img,0, 0);），轉成url流傳到後臺（canvas.toDataURL('image/png')），並生成圖片，放入pdf中。
2.代碼
下面是完整生成圖片流的代碼：
var tupu =$("#company_tupu").contents().find("#container");//定位到svg位置
var svgXml= tupu.html();
var img = new Image();
var imagesrc = 'data:image/svg+xml;base64,'+ window.btoa(unescape(encodeURIComponent(svgXml)));
img.src = imagesrc;
img.onload = function(){
var canvas =document.createElement('canvas'); //準備空畫布
canvas.width =tupu.width();
canvas.height =tupu.height();
varcontext = canvas.getContext('2d'); //取得畫布的2d繪圖上下文
context.drawImage(img, 0,0);
var tupuUrl =canvas.toDataURL('image/png');
};
3.問題\困難
Bug：
1. 最開始時，選擇利用window.location.reload()重新刷新頁面，再用img.onload=function(){}，來生成canvas。
Q:此時chrom可以正常加載並生成圖片但是firefox不正常。
A: FF無法執行onload方法（原因還沒徹底清除，猜測是某一個方法，覆蓋了onload，倒是onload沒有執行），導致圖片不能生成
2. 經過修改，不用重新加載頁面(因爲關係圖譜之前已生成，可以直接找到svg)，並且沒有用onload方法
Q:此時，chrom正常，FF也可以正常下載，但是沒有圖片，圖片是空白
A:據分析，應該是img沒有生成，在toDataURL之後才生成，加入onload方法，讓圖片加載完，再執行生成流的過程。
3. NS_ERROR_NOT_AVAILABLE未解決，猜測是因爲img沒有生成完
4.小提示
Tip：canvas drawImage() 方法
http://www.w3school.com.cn/tags/canvas_drawimage.asp
onload事件不同瀏覽器總結
http://www.w3help.org/zh-cn/causes/SD9022