保存SVG爲PNG使用JavaScript未知DOM異常

我想通過瀏覽器的SVG轉換爲PNG使用javascript
我已經在這個問題上Save inline SVG as JPEG/PNG/SVG 保存SVG爲PNG使用JavaScript未知DOM異常

它適用於給定的XML中，答案如下回答不幸的是，我試圖轉換我的SVG時得到了Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.。這是我的代碼片段。有人能告訴我爲什麼它不起作用嗎？

var btn = document.querySelector('button'); 
 
var svg = document.querySelector('svg'); 
 
var canvas = document.querySelector('canvas'); 
 

 
function triggerDownload (imgURI) { 
 
    var evt = new MouseEvent('click', { 
 
    view: window, 
 
    bubbles: false, 
 
    cancelable: true 
 
    }); 
 

 
    var a = document.createElement('a'); 
 
    a.setAttribute('download', 'MY_COOL_IMAGE.png'); 
 
    a.setAttribute('href', imgURI); 
 
    a.setAttribute('target', '_blank'); 
 

 
    a.dispatchEvent(evt); 
 
} 
 

 
btn.addEventListener('click', function() { 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var data = (new XMLSerializer()).serializeToString(svg); 
 
    var DOMURL = window.URL || window.webkitURL || window; 
 

 
    var img = new Image(); 
 
    img.crossOrigin = 'anonymous' 
 

 
    var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); 
 
    var url = DOMURL.createObjectURL(svgBlob); 
 

 
    img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
    DOMURL.revokeObjectURL(url); 
 

 
    var imgURI = canvas 
 
     .toDataURL('image/png') 
 
     .replace('image/png', 'image/octet-stream'); 
 

 
    triggerDownload(imgURI); 
 
    }; 
 

 
    img.src = url; 
 
});

<button>svg to png</button> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="161px" height="91px" version="1.1" style="background-color: rgb(255, 255, 255);"><defs/><g transform="translate(0.5,0.5)"><rect x="0" y="0" width="160" height="90" fill="#ffffff" stroke="#000000" pointer-events="none"/><path d="M 0 26 L 0 0 L 160 0 L 160 26 Z" fill="#dae8fc" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(48.5,7.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="63" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; white-space: nowrap; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Classname</div></div></foreignObject><text x="32" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica" font-weight="bold">Classname</text></switch></g><g transform="translate(5.5,32.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="62" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; overflow: hidden; max-height: 22px; max-width: 148px; width: 63px; white-space: normal; word-wrap: normal;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">+ field: type</div></div></foreignObject><text x="31" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ field: type</text></switch></g><path d="M 0 56 L 160 56" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(5.5,66.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="111" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; overflow: hidden; max-height: 22px; max-width: 148px; width: 112px; white-space: normal; word-wrap: normal;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">+ method(type): type</div></div></foreignObject><text x="56" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ method(type): type</text></switch></g></g></svg> 
 

 
<canvas id="canvas"></canvas>

來源

2017-06-07 jamesalone

爲什麼你需要將'svg'轉換爲'png'？爲什麼你不能下載和使用圖像作爲'svg'？ – guest271314

這是要求之一，對此無能爲力。 – jamesalone

您的SVG的foreignObject問題上消除，這將解決您的問題，

var btn = document.querySelector('button'); 
 
var svg = document.querySelector('svg'); 
 
var canvas = document.querySelector('canvas'); 
 

 
function triggerDownload (imgURI) { 
 
    var evt = new MouseEvent('click', { 
 
    view: window, 
 
    bubbles: false, 
 
    cancelable: true 
 
    }); 
 

 
    var a = document.createElement('a'); 
 
    a.setAttribute('download', 'MY_COOL_IMAGE.png'); 
 
    a.setAttribute('href', imgURI); 
 
    a.setAttribute('target', '_blank'); 
 

 
    a.dispatchEvent(evt); 
 
} 
 

 
btn.addEventListener('click', function() { 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var data = (new XMLSerializer()).serializeToString(svg); 
 
    var DOMURL = window.URL || window.webkitURL || window; 
 

 
    var img = new Image(); 
 
    img.crossOrigin = 'anonymous' 
 

 
    var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); 
 
    var url = DOMURL.createObjectURL(svgBlob); 
 

 
    img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
    DOMURL.revokeObjectURL(url); 
 

 
    var imgURI = canvas 
 
     .toDataURL('image/png') 
 
     .replace('image/png', 'image/octet-stream'); 
 

 
    triggerDownload(imgURI); 
 
    }; 
 

 
    img.src = url; 
 
});

<button>svg to png</button> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="161px" height="91px" version="1.1" style="background-color: rgb(255, 255, 255);"> 
 
<defs/> 
 
<g transform="translate(0.5,0.5)"> 
 
<rect x="0" y="0" width="160" height="90" fill="#ffffff" stroke="#000000" pointer-events="none"/> 
 
<path d="M 0 26 L 0 0 L 160 0 L 160 26 Z" fill="#dae8fc" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/> 
 
<g transform="translate(48.5,7.5)"> 
 
<switch> 
 

 
<text x="32" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica" font-weight="bold">Classname</text> 
 
</switch> 
 
</g> 
 
<g transform="translate(5.5,32.5)"> 
 
<switch> 
 

 

 
<text x="31" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ field: type</text> 
 
</switch> 
 
</g> 
 
<path d="M 0 56 L 160 56" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(5.5,66.5)"> 
 
<switch> 
 

 
<text x="56" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ method(type): type</text> 
 
</switch> 
 
</g> 
 
</g> 
 
</svg> 
 

 
<canvas id="canvas"></canvas>

您也可以嘗試Canvas2Image plugin

來源

2017-06-07 05:31:49

如果我使用Canvas2Image插件，是否需要再次轉換我的SVG？ – jamesalone

只需要一次。首先將你的SVG轉換爲Canvas，然後調用'canvas2image'函數。 –

保存SVG爲PNG使用JavaScript未知DOM異常

回答

相關問題