我想将我的svg图像转换为png图像。为此，我看到了一个执行此操作的脚本，它也在工作，但问题是它正在画布中创建我的 svg 图像，但我希望当用户单击下载按钮时，它会自动开始下载图像。由于控制台日志错误消息"未捕获的安全错误：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布"，图像的预览也被隐藏。为此，我还在此处的s3school上附加了此脚本的工作链接-https://www.w3schools.com/code/tryit.asp?filename=GFLFOANAWGUE
d3.select("#download")
.on('click', function(){
var doctype = '<?xml version="1.0" standalone="no"?>'
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
// serialize our SVG XML to a string.
var source = (new XMLSerializer()).serializeToString(d3.select('svg').node());
// create a file blob of our SVG.
var blob = new Blob([ doctype + source], { type: 'image/svg+xml;charset=utf-8' });
var url = window.URL.createObjectURL(blob);
// Put the svg into an image tag so that the Canvas element can read it in.
var img = d3.select('body').append('img')
.attr('width', 100)
.attr('height', 100)
.node();
img.onload = function(){
// Now that the image has loaded, put the image into a canvas element.
var canvas = d3.select('body').append('canvas').node();
canvas.width = 100;
canvas.height = 100;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var canvasUrl = canvas.toDataURL("image/png");
var img2 = d3.select('body').append('img')
.attr('width', 500)
.attr('height', 500)
.attr("crossorigin","anonymous")
.node();
// this is now the base64 encoded version of our PNG! you could optionally
// redirect the user to download the PNG by sending them to the url with
window.location.href= canvasUrl;
img2.src = canvasUrl;
}
// start loading the image.
img.src = url;
var link = document.createElement('a');
link.href = canvasUrl;
link.download = 'Download.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})<button id='download'>download</button>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" class="graph" viewBox="0 0 1280 720"><g class="dchart" transform="translate(60,10)"><g class="y axis" fill="none" font-size="25px" font-family="sans-serif" text-anchor="end" transform="translate(50, 0)"><path class="domain" stroke="currentColor" d="M-6,0.5H0.5V610.5H-6"/><g class="tick" opacity="1" transform="translate(0,23.718976791917342)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1.6</text></g><g class="tick" opacity="1" transform="translate(0,94.90341851028295)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1.4</text></g><g class="tick" opacity="1" transform="translate(0,166.08786022864854)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1.2</text></g><g class="tick" opacity="1" transform="translate(0,237.27230194701406)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1.0</text></g><g class="tick" opacity="1" transform="translate(0,308.4567436653797)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0.8</text></g><g class="tick" opacity="1" transform="translate(0,379.64118538374527)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0.6</text></g><g class="tick" opacity="1" transform="translate(0,450.82562710211084)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0.4</text></g><g class="tick" opacity="1" transform="translate(0,522.0100688204764)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0.2</text></g><g class="tick" opacity="1" transform="translate(0,593.194510538842)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0.0</text></g></g><foreignObject class="frobj" x="-47.6" y="213.5" width="20%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" contenteditable="true" style="font-size: 30px; transform: rotate(-90deg) translateX(-100%) translateY(40%); transform-origin: left center; width: fit-content;">Intensity (a.u.)</div></foreignObject><g class="x axis" transform="translate(0,610)" fill="none" font-size="25px" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M50.5,6V0.5H1190.5V6"/><g class="tick" opacity="1" transform="translate(102.31818181818181,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">200</text></g><g class="tick" opacity="1" transform="translate(231.86363636363637,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">250</text></g><g class="tick" opacity="1" transform="translate(361.4090909090909,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">300</text></g><g class="tick" opacity="1" transform="translate(490.95454545454544,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">350</text></g><g class="tick" opacity="1" transform="translate(620.5,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">400</text></g><g class="tick" opacity="1" transform="translate(750.0454545454546,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">450</text></g><g class="tick" opacity="1" transform="translate(879.5909090909091,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">500</text></g><g class="tick" opacity="1" transform="translate(1009.1363636363637,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">550</text></g><g class="tick" opacity="1" transform="translate(1138.6818181818182,0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">600</text></g></g><foreignObject class="frobj" x="476" y="652.7" width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" contenteditable="true" style="font-size: 30px; width: fit-content;">Wavelength(nm)</div></foreignObject><path class="line" d="M101.81818181818181,550.90959917237C110.45454545454545,551.119474634703,119.09090909090908,551.329350097036,127.72727272727272,551.5520387588783C136.36363636363635,551.7747274207206,145,552.2457311434238,153.63636363636363,552.2457311434238C162.27272727272725,552.2457311434238,170.9090909090909,543.4074708596714,179.54545454545453,525.7309502921669C188.18181818181816,508.05442972466227,196.8181818181818,434.74086135450034,205.45454545454544,355.95961601595087C214.0909090909091,277.1783706774013,222.72727272727272,53.04347826086953,231.36363636363637,53.04347826086953C240,53.04347826086953,248.63636363636363,202.81536567520655,257.27272727272725,266.9466749470121C265.9090909090909,331.07798421881785,274.54545454545456,429.1456455947007,283.1818181818182,437.8313338917033C291.8181818181818,446.51702218870594,300.45454545454544,450.8598663372072,309.09090909090907,450.8598663372072C317.7272727272727,450.8598663372072,326.3636363636364,394.4316034648502,335,376.4778194968526C343.6363636363636,358.52403552885505,352.27272727272725,343.1371625292217,360.9090909090909,343.1371625292217C369.54545454545456,343.1371625292217,378.1818181818182,360.85289386003944,386.81818181818187,371.5518561299417C395.4545454545455,382.2508183998439,404.0909090909091,396.11327658007843,412.72727272727275,407.3309361486352C421.3636363636364,418.5485957171919,429.99999999999994,429.47944130599177,438.63636363636357,438.8578135412821C447.27272727272725,448.2361857765725,455.9090909090909,455.93543567246286,464.54545454545456,463.60116956037746C473.1818181818182,471.26690344829206,481.8181818181818,478.2880622164468,490.45454545454544,484.8522168687697C499.09090909090907,491.4163715210926,507.72727272727275,497.17406576911446,516.3636363636364,502.9860974743147C525,508.79812917951494,533.6363636363636,514.7822492725694,542.2727272727273,519.7244070999712C550.9090909090909,524.6665649273731,559.5454545454545,528.8084316687562,568.1818181818181,532.6390444387257C576.8181818181818,536.4696572086953,585.4545454545455,539.7337011429547,594.0909090909091,542.7080837197885C602.7272727272727,545.6824662966224,611.3636363636364,548.1319229361512,620,550.4853398997285C628.6363636363636,552.8387568633058,637.2727272727273,554.9494942009915,645.9090909090909,556.8285855012521C654.5454545454545,558.7076768015127,663.1818181818181,560.265488988151,671.8181818181818,561.7598877012919C680.4545454545455,563.2542864144327,689.0909090909091,564.6137312901493,697.7272727272729,565.7949777800975C706.3636363636365,566.9762242700457,715.0000000000001,567.9141386100531,723.6363636363637,568.8473666409809C732.2727272727274,569.7805946719087,740.909090909091,570.6087070105657,749.5454545454546,571.3943459656641C758.1818181818182,572.1799849207624,766.8181818181818,572.9031595282529,775.4545454545454,573.5612003715711C784.090909090909,574.2192412148893,792.7272727272726,574.8112584885138,801.3636363636363,575.3425910255733C809.9999999999999,575.8739235626327,818.6363636363635,576.3165128290167,827.2727272727271,576.7491955939281C835.9090909090909,577.1818783588395,844.5454545454545,577.5729775457139,853.1818181818182,577.938687615042C861.8181818181819,578.3043976843701,870.4545454545455,578.6176092279309,879.0909090909091,578.9434560098967C887.7272727272727,579.2693027918626,896.3636363636364,579.6131829657304,905,579.8937683068369C913.6363636363636,580.1743536479435,922.2727272727273,580.3979321153073,930.9090909090909,580.6269680565362C939.5454545454545,580.856003997765,948.1818181818181,581.101412360589,956.8181818181818,581.26798395421C965.4545454545455,581.4345555478309,974.0909090909091,581.4915624215737,982.7272727272729,581.6263976182619C991.3636363636365,581.7612328149501,1000.0000000000001,581.945778480105,1008.6363636363637,582.0769951343392C1017.2727272727274,582.2082117885734,1025.909090909091,582.3177765084516,1034.5454545454545,582.4136975436671C1043.1818181818182,582.5096185788826,1051.8181818181818,582.5638373953248,1060.4545454545455,582.6525213456322C1069.090909090909,582.7412052959396,1077.7272727272727,582.8380754570449,1086.3636363636363,582.9458012455119C1095,583.0535270339791,1103.6363636363635,583.2101328057594,1112.2727272727273,583.2988760764349C1120.909090909091,583.3876193471104,1129.5454545454545,583.4329401083379,1138.1818181818182,583.4782608695652" style="fill: none; stroke: darkblue; stroke-width: 6;"/><foreignObject class="frobj" x="990" y="10" width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" contenteditable="true" style="font-size: 30px; width: fit-content;">Raw Data</div></foreignObject><rect width="20" height="10" x="950" y="18" fill="darkblue"/><circle class="dot" cx="101.81818181818181" cy="550.90959917237" r="4" style="fill: darkblue;"/><circle class="dot" cx="127.72727272727272" cy="551.5520387588783" r="4" style="fill: darkblue;"/><circle class="dot" cx="153.63636363636363" cy="552.2457311434238" r="4" style="fill: darkblue;"/><circle class="dot" cx="179.54545454545453" cy="525.7309502921669" r="4" style="fill: darkblue;"/><circle class="dot" cx="205.45454545454544" cy="355.95961601595087" r="4" style="fill: darkblue;"/><circle class="dot" cx="231.36363636363637" cy="53.04347826086953" r="4" style="fill: darkblue;"/><circle class="dot" cx="257.27272727272725" cy="266.9466749470121" r="4" style="fill: darkblue;"/><circle class="dot" cx="283.1818181818182" cy="437.8313338917033" r="4" style="fill: darkblue;"/><circle class="dot" cx="309.09090909090907" cy="450.8598663372072" r="4" style="fill: darkblue;"/><circle class="dot" cx="335" cy="376.4778194968526" r="4" style="fill: darkblue;"/><circle class="dot" cx="360.9090909090909" cy="343.1371625292217" r="4" style="fill: darkblue;"/><circle class="dot" cx="386.81818181818187" cy="371.5518561299417" r="4" style="fill: darkblue;"/></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>而不是
link.download = 'Download.svg';
尝试
link.download = 'Download.png';