我想抓住一个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');
};