تبدیل canvas به خروجی عکس
آخرین بروز رسانی: 1403/07/03
GetExport = (svgId) => {
let res1 = this.convertSvgToXmlImage(svgId );
let image = new Image();
image.onload = function () {
debugger
let canvas = document.createElement('canvas');
canvas.width = parseInt(res1.width);
canvas.height = parseInt(res1.height);
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
let pngData = canvas.toDataURL("image/png");
let link = document.createElement('a');
link.download = 'خروجی.png';
link.href = pngData;
link.click();
}
image.src = res1.xml;
}
convertSvgToXmlImage = (svgId) => {
let chart = document.getElementById(svgId);
let xml = new XMLSerializer().serializeToString(chart);
let svg64 = window.btoa(unescape(encodeURIComponent(xml)));
let b64start = 'data:image/svg+xml;base64,';
let image64 = b64start + svg64;
return { xml: image64, width: chart.getAttribute('width'), height: chart.getAttribute('height') };
}
GetExportMultiCanvasInOneImg = (chartTitle) => {
let canvas = document.createElement('canvas');
let res1 = this.convertSvgToXmlImage('Gauge1_svg');
let res2 = this.convertSvgToXmlImage('Gauge2_svg');
let res3 = this.convertSvgToXmlImage('Gauge3_svg');
canvas.width = parseInt(res1.width) + parseInt(res2.width) + parseInt(res3.width);
canvas.height = parseInt(res1.height);
let ctx = canvas.getContext('2d');
let image = new Image();
let pass = 1;
image.onload = function () {
if (pass == 1) {
ctx.drawImage(image, 0, 0);
pass++;
image.src = res2.xml;
}
else if (pass == 2) {
ctx.drawImage(image, 480, 0);
pass++;
image.src = res3.xml;
}
else if (pass == 3) {
ctx.drawImage(image, 960, 0);
let pngData = canvas.toDataURL("image/png");
let link = document.createElement('a');
link.download = chartTitle + '.png';
link.href = pngData;
link.click();
}
}
image.src = res1.xml;
}
<button className='btn-success' onClick={() => this.GetExport('chart2')}>
خروجی تصویر
</button >