LukeHan 의 잡다한 기술 블로그

SVG 파일을 PNG 파일로 변환 본문

개발/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 파일이 너무 큰 경우 변환이 안될 수 있습니다.

반응형
저작자표시 비영리 변경금지
'개발/Web' Related Articles more
Comments