如何在没有调用canvas toDataURL的情况下获取base64图像数据?

时间:2014-12-31 09:01:35

标签: image html5-canvas base64 jspdf todataurl

我正在进行一项需要支持ie9或ie10的项目 我正在使用d3.js进行数据可视化 现在我需要提供一个函数来将图表导出为pdf 我一直在研究可能的解决方案。似乎canvas + jsPdf是要走的路,下面是我写的一些代码 但问题是当调用toDataURL时,它会导致IE9和IE10出现安全错误。所以我想知道是否有一些工作来获取base64图像数据而不使用canvas,因为jsPdf只需要base64图像数据???

  1. createObjectURL到root svg元素

    svgElement = $('svg').get(0); 
    serializer = new XMLSerializer();
    str = serializer.serializeToString(svgElement);
    
    DOMURL = window.URL || window.webkitURL || window;
    url = DOMURL.createObjectURL(new Blob([str], {type: 'image/svg+xml;charset=utf-8'}));
    
  2. 使用画布绘制图像

    img = new Image();
    img.onload = function(){
        ctx.drawImage(img, 0, 0);
    
        imgData = $canvas.get(0).toDataURL("image/jpeg");
        DOMURL.revokeObjectURL(url);  
    
        pdf = new jsPDF('landscape', 'pt', 1000, 800);
        pdf.addImage(imgData, 'JPEG', 0, 0);
        pdf.save('download.pdf');
    };
    img.src = url;
    

1 个答案:

答案 0 :(得分:0)

我终于找到了使用开源项目的解决方案:canvg