[JavaScript] 이미지 URL 혹은 파일 -> Base64 변경 후 다운로드

 

▶ 이미지 URL -> Base64 변경

function convertImgToBase64URL(url, callback, outputFormat){
	var img = new Image();
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
		var canvas = document.createElement('CANVAS'),
		ctx = canvas.getContext('2d'), dataURL;
		canvas.height = img.height;
		canvas.width = img.width;
		ctx.drawImage(img, 0, 0);
		dataURL = canvas.toDataURL(outputFormat);
		callback(dataURL);
		canvas = null; 
	};
	img.src = url;
}

 

▶ 파일 -> Base64 변경

function getBase64(file, callback) {
	var reader = new FileReader();  
	reader.readAsDataURL(file);
		   
	reader.onload = function () {
		callback(reader.result);
	};
		   
	reader.onerror = function (error) {
		console.log('Error: ', error);
	};	   
}

 

▶ 자바스크립트 파일 다운로드

function download(data, strFileName, strMimeType) {
			
	var self = window,
	u = "application/octet-stream",
	m = strMimeType || u, 
	x = data,
	D = document,
	a = D.createElement("a"),
	z = function(a){
    	return String(a);
    },
				
				
	B = self.Blob || self.MozBlob || self.WebKitBlob || z,
	BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
	fn = strFileName || "download",
	blob, 
	b,
	ua,
	fr;
	
			
	if(String(this)==="true"){
		x=[x, m];
		m=x[0];
		x=x[1]; 
	}
			
	
	if(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){
		return navigator.msSaveBlob ?
		navigator.msSaveBlob(d2b(x), fn) : 
		saver(x) ;
	}
			
	try{
		blob = x instanceof B ? 
		x : 
		new B([x], {type: m}) ;
	}catch(y){
		if(BB){
			b = new BB();
			b.append([x]);
			blob = b.getBlob(m); // the blob
		}
	}
			
			
			
	function d2b(u) {
		var p= u.split(/[:;,]/),
		t= p[1],
		dec= p[2] == "base64" ? atob : decodeURIComponent,
		bin= dec(p.pop()),
		mx= bin.length,
		i= 0,
		uia= new Uint8Array(mx);
	
		for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);
		return new B([uia], {type: t});
	}
			  
    function saver(url, winMode){
        if ('download' in a) {
            a.href = url;
            a.setAttribute("download", fn);
            a.innerHTML = "downloading...";
            D.body.appendChild(a);
            setTimeout(function() {
                a.click();
                D.body.removeChild(a);
                if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}
            }, 66);
            return true;
        }

        var f = D.createElement("iframe");
        D.body.appendChild(f);
        if(!winMode){
            url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
        }

        f.src = url;
        setTimeout(function(){ D.body.removeChild(f); }, 333);

    }//end saver 
				
	
	if (navigator.msSaveBlob) {
		return navigator.msSaveBlob(blob, fn);
	}
			
	if(self.URL){
		saver(self.URL.createObjectURL(blob), true);
	}else{
		if(typeof blob === "string" || blob.constructor===z ){
			try{
				return saver( "data:" +  m   + ";base64,"  +  self.btoa(blob)  ); 
			}catch(y){
				return saver( "data:" +  m   + "," + encodeURIComponent(blob)  ); 
			}
		}
				
        fr=new FileReader();
        fr.onload=function(e){
            saver(this.result); 
        };
        fr.readAsDataURL(blob);
	}	
	return true;
}

 

 

▶ 사용예시

$("#btnDownSimtosBanner").on("click", function() {
	convertImgToBase64URL("/resources/file/SIMTOS_EI_download.png", function(data) {
		download( data, "SIMTOS_Banner.png", "image/png" );
	} );
} );