svg的屏幕截图显示为纯色背景

时间:2017-10-30 14:09:35

标签: javascript svg

我想抓住一个svg。我使用canvg将svg转换为canvas。但是在打印时,我会得到纯黑色的图像。

我已经尝试过很多建议,但到目前为止还没有运气。

vm.printDiagram = function() {
    var fileName="Diagram.pdf";
    var svgElements = $("#eleDiagram").find('svg');
      svgElements.each(function() {
        var canvas, xml;
        canvas = document.createElement("canvas");
        canvas.className = "screenShotTempCanvas";
        var ctx = canvas.getContext('2d');
        ctx.fillText(255,255,255);
        //ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        xml = (new XMLSerializer()).serializeToString(this);
        xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
        //draw the SVG onto a canvas
        canvg(canvas, xml);
        $(canvas).insertAfter(this);
        $(this).attr('class', 'tempHide');
        $(this).hide();
      });

      html2canvas($("#eleDiagram"), {
          background :'#FFFFFF',
            onrendered: function(canvas){
                var image = new Image();
                image.src = canvas.toDataURL("image/png");
                var fullQuality= canvas.toDataURL('image/png', 1.0);
                var dwidth=$("#eleDiagram").width();
                var dheight=$("#eleDiagram").height();
                var _postPdfData =  {
                    "images":[
                        {  
                            "data":fullQuality,
                            "width":dwidth,
                            "height": dheight                                
                           }                           
                     ]      
                };  
                _postPdfData = JSON.parse(angular.toJson(_postPdfData));
                    var pdfUrl = "service/printpdf";
                    $http.post(pdfUrl,_postPdfData,{responseType:'arraybuffer'}).then(function onSuccess(response) {
                        if (response.data) {                            
                            var file = new Blob([response.data], {type: 'application/pdf'});
                            var fileURL = window.URL.createObjectURL(file);
                            if(response && response.data){
                                var a = document.createElement("a");
                                document.body.appendChild(a);
                                a.href = fileURL;
                                a.download = fileName;
                                a.click();
                            }
                        }

                    });
                }
      });
      $("#eleDiagram").find('.screenShotTempCanvas').remove();
      $("#eleDiagram").find('.tempHide').show().removeClass('tempHide');
};

0 个答案:

没有答案