html2canvas识别svg解决⽅案参考：
html
<div class="visualization">
<svg xmlns="/2000/svg" class="chart-container" width="900" height="440">
<g transform="translate(90, 10)">
<g transform="translate(0, 302)">
<path fill="none" stroke="#777" d="M 0 6 V 0 H 779 V 6"/>
</g>svg和canvas的区别
<g>
<line stroke="#2e9ccc" stroke-width="50" transform="translate(253)" x1="0" y1="302" x2="0" y2="14"/>
<line stroke="#2e9ccc" stroke-width="100" transform="translate(253)" x1="150" y1="302" x2="150" y2="119"/> </g>
</g>
</svg>
</div>
js
html2canvas([$('div.visualization')[0]], {
useCORS: true
}).then(function (canvas) {
if (navigator.msSaveBlob) {
console.log('this is IE');
var URL=window.URL;
var BlobBuilder = window.MSBlobBuilder;
navigator.saveBlob=navigator.msSaveBlob;
var imgBlob = canvas.msToBlob();
if (BlobBuilder && navigator.saveBlob) {
var showSave =  function (data, name, mimetype) {
var builder = new BlobBuilder();
builder.append(data);
var blob = Blob(mimetype||"application/octet-stream");
if (!name)
name = "Download.bin";
navigator.saveBlob(blob, name);
};
showSave(imgBlob, 'barchart.png',"image/png");
}
} else {
if ($('#export-image-container').length == 0)
$('body').append('<a id="export-image-container" download="barchart.jpg">')
img = DataURL("image/jpeg")
img = place('data:image/jpeg;base64,', '')
finalImageSrc = 'data:image/jpeg;base64,' + img
$('#export-image-container').attr('href', finalImageSrc)
$('#export-image-container')[0].click()
$('#export-image-container').remove()
}
});
css
div.visualization {
width:1009px;
height:440px;
overflow:visible;
background-color: #fff;
color:transparent;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。