xit-app
/
external-system-test
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 이미지에디터 진행

Browse Source
main
minuk926 2 years ago
parent a2273b9ced
commit c7f15d2134
6 changed files with 419 additions and 23 deletions
Show Stats Download Patch File Download Diff File

29
src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java
Unescape Escape View File

@ -145,4 +145,33 @@ public class CmmFileDTO {
private MultipartFile[] files; private MultipartFile[] files;
//private List<MultipartFile> files; //private List<MultipartFile> files;
} }
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
@EqualsAndHashCode
@Builder
@ToString
public static class PaintwebReq implements Serializable {
private static final long SerialVersionUID = 1L;
private String interfaceSeqN;
private String ctznSttemntDetailSn;
private String fileMastrId;
private String jobSeCode;
private String fileJobId;
private String fileId;
private String orginlFileNm;
private String fileCours;
private String downloadUrl;
private String register;
private MultipartFile file;
//private List<MultipartFile> files;
}
} }

15
src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java
Unescape Escape View File

@ -60,6 +60,21 @@ public class CmmFileMgtController {
return mav; return mav;
} }
@PostMapping(value = "/uploadPaintweb", consumes = "multipart/form-data")
public ModelAndView uploadPaintweb(final CmmFileDTO.PaintwebReq dto) {
ModelAndView mav = new ModelAndView(FrameworkConstants.JSON_VIEW);
// CmmFileDTO.FileMst cmmFileMst = CmmFileDTO.FileMst.builder()
// .fileMastrId(cmmFileDto.getFileMastrId())
// .jobSeCode(cmmFileDto.getJobSeCode())
// .fileJobId(cmmFileDto.getFileJobId())
// .build();
// cmmFileService.saveFiles(cmmFileMst, Arrays.asList(cmmFileDto.getFiles()));
AjaxMessageMapRenderer.success(mav, MessageKey.CMM_INSERT_SUCCESS);
return mav;
}
@GetMapping("/{fileMstId}") @GetMapping("/{fileMstId}")
public ModelAndView findFiles(@PathVariable("fileMstId") final String fileMstId) { public ModelAndView findFiles(@PathVariable("fileMstId") final String fileMstId) {
if(Checks.isEmpty(fileMstId)) throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, "대상 파일[fileMstId]을 선택해 주세요."); if(Checks.isEmpty(fileMstId)) throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, "대상 파일[fileMstId]을 선택해 주세요.");

4
src/main/resources/logback-local.xml
Unescape Escape View File

@ -3,7 +3,7 @@
<configuration scan="true" scanPeriod="3600 seconds"> <configuration scan="true" scanPeriod="3600 seconds">
<property name="SLACK_WEBHOOK_URI" source="logging.slack.webhook-uri"/> <property name="SLACK_WEBHOOK_URI" source="logging.slack.webhook-uri"/>
<property name="LOG_PATH" value="${user.home}/data/xit/logs"/> <property name="LOG_PATH" value="${user.home}/data/fims/logs"/>
<property name="LOG_PATTERN" value="[%d{yyyy-MM-dd HH:mm:ss}:%-3relative][%thread] %-5level %logger{35} - %msg%n"/> <property name="LOG_PATTERN" value="[%d{yyyy-MM-dd HH:mm:ss}:%-3relative][%thread] %-5level %logger{35} - %msg%n"/>
<property name="ROOT_LOG_LEVEL" value="WARN" /> <property name="ROOT_LOG_LEVEL" value="WARN" />
@ -201,7 +201,7 @@
<root level="WARN"> <root level="WARN">
<appender-ref ref="CONSOLE"/> <appender-ref ref="CONSOLE"/>
<appender-ref ref="ASYNC_ROLLING"/> <!-- <appender-ref ref="ASYNC_ROLLING"/>-->
<!-- <appender-ref ref="ASYNC_ERROR_ROLLING"/>--> <!-- <appender-ref ref="ASYNC_ERROR_ROLLING"/>-->
</root> </root>

129
src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
Unescape Escape View File

@ -1,5 +1,5 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@ -11,6 +11,7 @@
<script type="text/javascript" src="/resources/3rd-party/paintweb/html2canvas.min.js"></script> <script type="text/javascript" src="/resources/3rd-party/paintweb/html2canvas.min.js"></script>
<script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.min.js"></script> <script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.min.js"></script>
<script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.auto.min.js"></script> <script type="text/javascript" src="/resources/3rd-party/paintweb/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="/resources/framework/js/cmm/cmmUtil.js"></script>
</head> </head>
<body> <body>
<img id="editableImage"/> <img id="editableImage"/>
@ -19,6 +20,7 @@
<script type="text/javascript"> <script type="text/javascript">
//TODO: srcImg 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2669 line var url = srcImg.src; 변경 필요 //TODO: srcImg 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2669 line var url = srcImg.src; 변경 필요
var pw;
var srcImg; var srcImg;
let editImg =null; let editImg =null;
@ -27,18 +29,137 @@
} }
const initEditor = () => { const initEditor = () => {
const pw = new PaintWeb(); pw = new PaintWeb();
pw.config.guiPlaceholder = document.getElementById('PaintWebTarget'); pw.config.guiPlaceholder = document.getElementById('PaintWebTarget');
pw.config.configFile = 'paintweb-config.json'; pw.config.configFile = 'paintweb-config.json';
pw.config.imageLoad = editImg; pw.config.imageLoad = editImg;
pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload //pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload
pw.config.imageSaveURL = "/saveImage"; // imageSave == image upload
pw.config.imageDownloadURL = "/fileDownload.do"; pw.config.imageDownloadURL = "/fileDownload.do";
pw.config.afterImageSave = afterImageSave; //pw.config.afterImageSave = afterImageSave;
pw.config.imageSave = imageSaveTo;
pw.config.afterImageSave = () => window.close();
//var evId = pw.config.saveH('imageSave', saveHandler);
// Later you can remove the event handler
//pw.events.remove('imageSave', evId);
pw.init(); pw.init();
} }
function imageSaveTo(file, doc, _self){
//downloadImage(idata, 'lllll');
console.log(file)
this.image = {
filename: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified
}
//let formData = new FormData();
//formData.append('file', file);
const {interfaceSeqN, ctznSttemntDetailSn, fileMastrId, fileId} = srcImg.dataset;
const param = {
interfaceSeqN,
ctznSttemntDetailSn,
fileMastrId,
fileId: 'kdkdkdk',
orginlFileNm: srcImg.orginlFileNm,
file: file
}
cmmAjax({
url: '<c:out value="/framework/biz/cmm/file/uploadPaintweb.do"/>',
data: $.param(JSON.stringify(param)),
})
return;
}
function imageSaveTo2(idata, width, height, doc, _self){
debugger
alert('~~~~imageSaveTo~~~');
console.log(idata)
var ex = /\?filename=([a-z0-9\-]+)\&?/i;
var dashdash = '--';
var crlf = '\r\n';
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var progressBar = doc.createElement("div");
progressBar.style.left = ((w-200)/2) + "px";
progressBar.className = "progressBar";
document.body.appendChild(progressBar);
var progressRate = doc.createElement("div");
progressRate.innerText = "Saving";
progressRate.className = "progressRate";
progressBar.appendChild(progressRate);
var url = srcImg.src;
var filename = url.match(ex)[1];
var boundary = 'multipartformboundary' + (new Date).getTime();
var xhr = new XMLHttpRequest();
xhr.open("POST", _self.config.imageSaveURL);
xhr.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);
var builder = dashdash + boundary + crlf + 'Content-Disposition: form-data; name="imageFile"' +
'; filename="' + filename + '";' + crlf + ' Content-Type: application/octet-stream' + crlf + crlf;
builder += idata;
builder += crlf + dashdash + boundary + crlf + 'Content-Disposition: form-data; name="filename"' + crlf + crlf + filename;
builder += crlf + dashdash + boundary + dashdash + crlf;
xhr.onload = function () {
var newImg = document.createElement("IMG");
newImg.onload = function () {
srcImg.src = newImg.src + "#img" + (new Date()).getTime();
if (_self.config.afterImageSave) _self.config.afterImageSave();
}
newImg.src = _self.config.imageDownloadURL + "?filename=" + filename+ "#img" + (new Date()).getTime();
};
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var p = evt.loaded / evt.total * 100;
progressRate.style.width = p + "%";
progressRate.innerText = progressRate.style.width;
if (p==100) {
progressRate.innerText = "Saved";
}
}
}, false);
xhr.send(builder);
}
function saveHandler (ev) {
// Cancel the default action of the event.
ev.preventDefault();
alert('saveHandler~~~')
var handlerURL = 'image_save_script.php', send = 'dataURL=' + encodeURIComponent(ev.dataURL), headers = {'Content-Type': 'application/x-www-form-urlencoded'};
// 이미지를 저장하는 서버 측 스크립트로 데이터 URL을 보냅니다.
pwlib.xhrLoad ( handlerURL, saveReady, 'POST', send, header );
}
// The XMLHttpRequest onreadystatechange event handler.
function saveReady (xhr) {
alert('saveReady~~~')
if (!xhr || xhr.readyState !== 4) {
return;
}
if ((xhr.status !== 304 && xhr.status !== 200) || !xhr.responseText || xhr.responseText !== 'OK') {
// Image save failed.
pw.events.dispatch(new appEvent.imageSaveResult(false));
return;
}
// Image save was successful.
pw.events.dispatch(new appEvent.imageSaveResult(true));
}
$(document).ready(function () { $(document).ready(function () {

106
src/main/webapp/resources/3rd-party/paintweb/paintweb.js vendored
Unescape Escape View File

@ -2557,7 +2557,7 @@ function PaintWeb (win, doc) {
* *
* @returns {Boolean} True if the operation was successful, or false if not. * @returns {Boolean} True if the operation was successful, or false if not.
*/ */
this.imageSave = function (type) { this.imageSave = async function (type) {
var canvas = _self.layer.canvas, var canvas = _self.layer.canvas,
cfg = _self.config, cfg = _self.config,
img = _self.image, img = _self.image,
@ -2568,8 +2568,9 @@ function PaintWeb (win, doc) {
return false; return false;
} }
var extMap = {'jpg' : 'image/jpeg', 'jpeg' : 'image/jpeg', 'png' var extMap = {
: 'image/png', 'gif' : 'image/gif'}; 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'png': 'image/png', 'gif': 'image/gif'
};
// Detect the MIME type of the image currently loaded. // Detect the MIME type of the image currently loaded.
if (typeof type !== 'string' || !type) { if (typeof type !== 'string' || !type) {
@ -2621,15 +2622,33 @@ function PaintWeb (win, doc) {
return false; return false;
} }
// by gujc //--------------------------------------------------------------------
if (!_self.config.imageSaveURL) { // 변경된 부분
//--------------------------------------------------------------------
if (!_self.config.imageSave) {
if (_self.config.afterImageSave) _self.config.afterImageSave(); if (_self.config.afterImageSave) _self.config.afterImageSave();
return; return;
} }
imageSaveTo(idata, img.width, img.height);
//_self.config.imageSave(idata, img.width, img.height, doc, _self);
const fileObject = await toBlob(idata)
.then(res => {
console.log(res)
this.image = {
filename: res.name,
size: res.size,
type: res.type,
lastModified: res.lastModified
}
return res;
});
_self.config.imageSave(fileObject, img.width, img.height, doc, _self);
return; return;
//---------------------------------------------------------------------
var ev = new appEvent.imageSave(idata, img.width, img.height), var ev = new appEvent.imageSave(idata, img.width, img.height),
cancel = _self.events.dispatch(ev); cancel = _self.events.dispatch(ev);
@ -2638,12 +2657,30 @@ function PaintWeb (win, doc) {
return true; return true;
} }
/*
var imgwin = _self.win.open(); var imgwin = _self.win.open();
if (!imgwin) { if (!imgwin) {
return false; return false;
} }
imgwin.location = idata; imgwin.location = idata;
*/
/*
var imgwin = _self.win.open();
if (!imgwin) {
return false;
}
imgwin.document.write('<iframe src="' + idata + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
*/
/*
var iframe = "<iframe width='100%' height='100%' src='" + idata + "'></iframe>";
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
*/
idata = null; idata = null;
_self.events.dispatch(new appEvent.imageSaveResult(true)); _self.events.dispatch(new appEvent.imageSaveResult(true));
@ -3023,3 +3060,60 @@ PaintWeb.baseFolder = '';
// vim:set spell spl=en fo=wan1croqlt tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix: // vim:set spell spl=en fo=wan1croqlt tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
var toBlob = async (url) => {
return () => {
this.base64Encode(url)
.then(res => {
let byteString = atob(res.dataUrl)
let ab = new ArrayBuffer(byteString.length)
let ia = new Uint8Array(ab)
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
// write the array buffer to blob
let blob = new Blob([ab], {type: 'image/' + res.type})
let formData = new FormData()
formData.append('file', blob, res.name)
return formData.get('file')
})
}
};
/**
* 전달받은 이미지를 base64로 인코딩한다
*/
var base64Encode = async (url) => {
const re = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
let name = (/[^(/|\\)]*$/).exec(url)[0]
let type = re.test(name) ? re.exec(name)[0].replace('.', '') : 'jpg'
return () => {
let image = new Image()
image.onload = function (event) {
let canvas = document.createElement('canvas')
// draw canvas
canvas.width = image.naturalWidth
canvas.height = image.naturalHeight
canvas.getContext('2d').drawImage(image, 0, 0)
let dataUrl = canvas.toDataURL('image/' + type)
return {
name: name,
type: type,
dataUrl: dataUrl.split(',')[1]
}
}
image.onerror = function () {
let msg = `"${file}"을 로딩하는 데 오류가 발생하였습니다. 이미지 파일을 확인해주세요.`
alert(msg)
console.error(msg)
}
image.crossOrigin = 'anonymous';
image.src = url
}
}

143
src/main/webapp/resources/framework/js/cmm/cmmUtil.js
Unescape Escape View File

@ -508,7 +508,7 @@ function serialize (formData) {
* </pre> * </pre>
*/ */
function downloadImage(img, fileName) { function downloadImage(img, fileName) {
var imgData = atob(img.src.split(',')[1]), var imgData = atob(img.split(',')[1]),
len = imgData.length, len = imgData.length,
buf = new ArrayBuffer(len), buf = new ArrayBuffer(len),
view = new Uint8Array(buf), view = new Uint8Array(buf),
@ -529,8 +529,8 @@ function downloadImage(img, fileName) {
//var url = URL.createObjectURL(blob); //var url = URL.createObjectURL(blob);
var a = document.createElement('a'); var a = document.createElement('a');
a.style = 'display: none'; a.style = 'display: none';
//a.href = url; a.href = URL.createObjectURL(blob);;
a.href = img.src; //a.href = img.src;
a.download = fileName; a.download = fileName;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
@ -541,3 +541,140 @@ function downloadImage(img, fileName) {
}, 100); }, 100);
} }
} }
var readBlob = async () => {
const data = await fetch('https://play-lh.googleusercontent.com/hYdIazwJBlPhmN74Yz3m_jU9nA6t02U7ZARfKunt6dauUAB6O3nLHp0v5ypisNt9OJk');
const blob = await data.blob();
const reader = new FileReader();
reader.onload = () => {
const base64data = reader.result;
console.log(base64data)
}
reader.readAsDataURL(blob);
fetch('https://www.business2community.com/wp-content/uploads/2014/04/Free.jpg')
.then((response) => response.blob())
.then((blob) => {
const url = URL.createObjectURL(blob);
document.querySelector('img').src = url;
document.querySelector('a').href = url;
});
}
/**
*
* @param b64Data
* @param contentType
* @param sliceSize
* @returns {Blob}
*/
// bas64를 blob으로 변환해주는 함수
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
const image_data = atob(b64Data.split(',')[1]); // data:image/gif;base64 필요없으니 떼주고, base64 인코딩을 풀어준다
const arraybuffer = new ArrayBuffer(image_data.length);
const view = new Uint8Array(arraybuffer);
for (let i = 0; i < image_data.length; i++) {
view[i] = image_data.charCodeAt(i) & 0xff;
// charCodeAt() 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환
// 비트연산자 & 와 0xff(255) 값은 숫자를 양수로 표현하기 위한 설정
}
return new Blob([arraybuffer], { type: contentType });
/*
const contentType = 'image/png';
const b64Data =
'data:image/gif;base64,R0lGODlhAAEAAcQAALe9v9ve3/b393mDiJScoO3u74KMkMnNz4uUmKatsOTm552kqK+1uNLW18DFx3B7gP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5QjEwQjYyNTc4MkUxRURBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEzN0VEMDZBQjMyNzExRTE4REMzRUZGMkFCOTM1NkZBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEzN0VEMDY5QjMyNzExRTE4REMzRUZGMkFCOTM1NkZBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTlCMTBCNjI1NzgyRTFFREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTlCMTBCNjI1NzgyRTFFREEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAAAEAAQAF/yAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4vH7P7/v/gIGCg4SFhoeIiYptBQEADAQED5OUlQ8DkQwAAQKLni0KDgsDlqWmpQYLDgqfrSINCQans7SWBgkNrogFDKS1v8APBgwFuoIBksHKwQsBxn3Iy9LKBM7PdwXJ09vAC8XXcwDc48EDAOBwCgjk7MAI3+hqB77t9bMDufFoDPb9tef6yiTwR3BWgoBiBKwryLDUQYRftDWcOOkhxC0DKWqseFGLuI0gHXS80gCkyQfWRv9KKUDvJMUBnVRGkeiS4gKZUA7UPJkP5xIBLXdSNOCTyUehIAEWPQIUqUmYS48cdbrxQFQjsqiCJHp1SEmtJlN2/ZER7EaLY30ENdtwQNofAdiaZPWWx1S5E0XW3UETL8Obe3Ws9UuQa+AbAghvPIwjrmKKYhnLcPy4YWTJMBxUntgTc4y7m/sp9QwDdOh6o0m7MH2aXWrVLFi3HmcV9ouvs+1dtp2Ccu52u3mfKPDbXkzhLIrXQ+5ioXJuBJi34PecGwPpLHRW39YZ+4nE26cd947CeXhg0cmr0Hw+WG31JQQ4AFC2fS1NB8aTVzDY/q8BdJHXlH/bQEUeewRuo5f/d30lGEx63jnIjVvkSciNehZug2GG0mzIoTIefgiMelmJWAuE2DVooiUoSkfdirO8hpx2MJ7yHnYK1DgLPN71B6Nh5NWn4yTXwefbkA8ESCKSkyAA3wg0DnkjfCXW6OSTIxy5YnBB6lgkliMoBCMC+oHJkolkgjmceRKmqeZ3APi4nTlvriDAAQCo+BsBADRQZp0o4LYdl4CiIOdpQBY6XXhfKgpKeDw6ygKbubUo6QpR/jblpSscqliinK4gW2UyhooCcb8ZaGoLQoaG1qoroDpbpLCq0Opjr9aqgqyh0aprCrf6Veqv33lKlarExrbZgsm2UCVeVzbrgpZsESqt/wkLEJbrtSqMihSz3K5ArVbWhjsCr2z9ae4JhK3bHF6WunuCnkIBJq8KL5o17L0ieFvTvvz661J3/JYwLlLlynuwUAm7u/BODa/7cE0RmzuxSxWHe/FJGXO7cVgFp5ApuSGjIPBJAN8bLFKNljzCs1pF67II6JqlbsCEgRvygHghW7CYirlZsDqbvVNwA8ZqhY+8BWSb2wI36xqncnRKewDMvxmwqalX+1cNrF07+PWlYWeodaHyYW2hAQ5EjRwvSSc4ADHqBeA0k5Qk0PFYd6qNt9Zuv6VAAnEPOUACSu51J6V4/0LA1lENXnjjlhyeOE6LU24PAvnhFMDKmo9z+P/euzjgd+j1sO2rKw3cjfpGCxC8CNyv72QAAKsTUgDotYOUQO6AnNz7RinrUQDjwyMlNCD8Jd/z5XsEMLnzGwH4x8fUu2Q9H81nT9j2eZzpvWI+0wH0+EHnwTv6WrUsh6DsK0Z6GDzH/2ng+9gfWvFm1Ky/XwMAHhrW9z+t8G8M4ClgZconDwWGBnJocJ0DCWOvNkxwMxRixAU3g78wYG+DFHOD8EBYE53lj4SEOWBEUEiYeJ3hdCwUiszUEMN2sSFHNcSLAMMAvxySbA0j9KFGVMgFAgoRJO4zA72OeBIXkmF6TCwIqMqQwChSZQ0ftCJD5leFkWmxJrIbQxC/SBD/ImZBgmR0ybbGsMQ0TsSJYXAjUjLYPzkipYNayKId68FFKSBojyeB4BfGCEjXoKGNhfRHBcmAvEQyBI5ecKRLzoBDSYJkh3m0JMjKQEhNTsOEX8iXJxtiRiogcpTkgOQWYIhKdswwjq2kSBn0GEtlQK8LPaxlP/rYhE7q8heljMIff9kPUHLBf8RkByaxgMZkjmOR9GOlM39hADxigWjT5AYCbkm/ZmazFlBjA9K+CYyluUEAUyOnKcxhzYSYTp2UYFs7zdA6csaOD3fypicX0DlACAAW0iTjLfxUugUENIepcMAyBVGAA0DCigRgwAEWqggF4IkAB82eAfh0AG5eaCQAeFrAKSlHgAUA4AC8DIgAAtCAR0QCb5noEyfgo4AAOMKlBGhkaxAQ000EwKOSqqlN8QSAooo0EpHQKTl4itSSFrWoKLUpUGdG1apa9apYzapWt8rVrnr1q2ANq1jHStaymvWseggBADs=';
const blob = b64toBlob(b64Data, contentType); // base64 -> blob
const blobUrl = URL.createObjectURL(blob); // object url 생성
const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
*/
}
/**
* 전달받은 이미지를 base64로 인코딩한다
* @param file - 이미지 파일 또는 이미지 URL
* @param maxWidth - 인코딩 시의 이미지 max width 사이즈
* @returns {Promise<any>}
*/
var readImage = () => {
let image = this.$refs.image.src
this.toBlob(image)
.then(res => {
console.log(res)
this.image = {
filename: res.name,
size: res.size,
type: res.type,
lastModified: res.lastModified
}
})
};
/**
* 이미지 url을 blob 파일로 변환하여 전달한다
* @param url
* @returns {Promise<any>}
*/
var toBlob = (url) => {
return new Promise((resolve, reject) => {
this.base64Encode(url)
.then(res => {
let byteString = atob(res.dataUrl)
let ab = new ArrayBuffer(byteString.length)
let ia = new Uint8Array(ab)
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
// write the array buffer to blob
let blob = new Blob([ab], {type: 'image/' + res.type})
let formData = new FormData()
formData.append('file', blob, res.name)
resolve(formData.get('file'))
})
})
};
/**
* 전달받은 이미지를 base64로 인코딩한다
*/
var base64Encode = (url) => {
const re = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
let name = (/[^(/|\\)]*$/).exec(url)[0]
let type = re.test(name) ? re.exec(name)[0].replace('.', '') : 'jpg'
return new Promise((resolve, reject) => {
let image = new Image()
image.onload = function (event) {
let canvas = document.createElement('canvas')
// draw canvas
canvas.width = image.naturalWidth
canvas.height = image.naturalHeight
canvas.getContext('2d').drawImage(image, 0, 0)
let dataUrl = canvas.toDataURL('image/' + type)
resolve({
name: name,
type: type,
dataUrl: dataUrl.split(',')[1]
})
}
image.onerror = function () {
let msg = `"${file}"을 로딩하는 데 오류가 발생하였습니다. 이미지 파일을 확인해주세요.`
alert(msg)
console.error(msg)
}
image.crossOrigin = 'anonymous';
image.src = url
})
}

Write Preview
Loading…
Cancel
Save