개발/Web
SVG 파일을 PNG 파일로 변환
LukeHan1128
2021. 12. 21. 20:00
반응형
<html>
<body>
<div class="card card-default pb-5">
<div class="save_btn">
<a class="hover" href='javascript:void(0);' onclick="PrintDiv(document.querySelector('#bar_chart2 > svg'));">이미지로 저장</a>
</div>
<div id="bar_chart2" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="8868px" preserveAspectRatio="none" style="width:4706px;height:8868px;background:#FFFFFF;" version="1.1" viewBox="0 0 4706 8868" width="4706px" zoomAndPan="magnify"><defs><filter height="300%" id="f100cw1upewzfo" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><!--MD5=[96321975751310cd1d1977a5e4b7a3a4]
...
--></g></svg>
</div>
<img id="resultPng">
</div>
<script>
//*
console.log('SVGToImage');
function SVGToImage(settings){
let _settings = {
svg: null,
// Usually all SVG have transparency, so PNG is the way to go by default
mimetype: "image/png",
quality: 1,
width: "auto",
height: "auto",
outputFormat: "base64"
};
// Override default settings
for (let key in settings) { _settings[key] = settings[key]; }
return new Promise(function(resolve, reject){
let svgNode;
// Create SVG Node if a plain string has been provided
if(typeof(_settings.svg) == "string"){
// Create a non-visible node to render the SVG string
let SVGContainer = document.createElement("div");
SVGContainer.style.display = "none";
SVGContainer.innerHTML = _settings.svg;
svgNode = SVGContainer.firstElementChild;
}else{
svgNode = _settings.svg;
}
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let svgXml = new XMLSerializer().serializeToString(svgNode);
let svgBase64 = "data:image/svg+xml;base64," + btoa(svgXml);
const image = new Image();
image.onload = function(){
let finalWidth, finalHeight;
// Calculate width if set to auto and the height is specified (to preserve aspect ratio)
if(_settings.width === "auto" && _settings.height !== "auto"){
finalWidth = (this.width / this.height) * _settings.height;
// Use image original width
}else if(_settings.width === "auto"){
finalWidth = this.naturalWidth;
// Use custom width
}else{
finalWidth = _settings.width;
}
// Calculate height if set to auto and the width is specified (to preserve aspect ratio)
if(_settings.height === "auto" && _settings.width !== "auto"){
finalHeight = (this.height / this.width) * _settings.width;
// Use image original height
}else if(_settings.height === "auto"){
finalHeight = this.naturalHeight;
// Use custom height
}else{
finalHeight = _settings.height;
}
// Define the canvas intrinsic size
canvas.width = finalWidth;
canvas.height = finalHeight;
// Render image in the canvas
context.drawImage(this, 0, 0, finalWidth, finalHeight);
if(_settings.outputFormat == "blob"){
// Fullfil and Return the Blob image
canvas.toBlob(function(blob){
resolve(blob);
}, _settings.mimetype, _settings.quality);
}else{
// Fullfil and Return the Base64 image
resolve(canvas.toDataURL(_settings.mimetype, _settings.quality));
}
};
// Load the SVG in Base64 to the image
image.src = svgBase64;
});
}
SVGToImage({
// 1. Provide the SVG DOM element
svg: document.querySelector('#bar_chart2 > svg'),
// 2. Provide the format of the output image
mimetype: "image/png",
// 3. Provide the dimensions of the image if you want a specific size.
// - if they remain in auto, the width and height attribute of the svg will be used
// - You can provide a single dimension and the other one will be automatically calculated
width: 4706,
height: 8868,
// 4. Specify the quality of the image
quality: 1,
// 5. Define the format of the output (base64 or blob)
outputFormat: "base64"
}).then(function(outputData){
// If using base64 (outputs a DataURL)
// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0...
// Or with Blob (Blob)
// Blob {size: 14353, type: "image/png"}
console.log(outputData);
document.querySelector('#resultPng').src=outputData
}).catch(function(err){
// Log any error
console.log(err);
});
//*/
</script>
</body>
</html>1. 위의 코드를 복사하여 html 파일을 생성한다.
2. 변환할 svg 파일을 Web Browser(Chrome) 로 연다.
3. F12 키를 누른 후 우측 <svg> 태그를 클릭한 뒤 F2 키를 누른다.
4. 수정 가능한 상태가 되면 Ctrl+A , Ctrl+C 로 전체 복사한다.
5. 1에서 생성한 html 파일을 편집기로 연 뒤 <svg> 태그를 복사한 내용으로 변경한다.
6. svg 태그 내에 있는 Width , Height 값을 확인한다.
7. 해당 값을 SVGToImage 안에 있는 Width , Height 에 입력하여 변경한다.
8. 저장 후 Web Browser(Chrome) 로 html 코드를 연 뒤 하단의 png 파일을 저장한다.
※ 주의 : svg 파일이 너무 큰 경우 변환이 안될 수 있습니다.
반응형