关于d3生成图片的一些实例

实例"/>

关于d3生成图片的一些实例

最近项目需要，正好多看了一下，下面就是一些记录，日积月累第一次。。。

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.οnlοad=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() 方法

.asp

         onload事件不同浏览器总结