Merge branch 'main-image-editor' into dev

# Conflicts:
#	src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
#	src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js
main
minuk926 2 years ago
commit 615a3d3744

@ -6,6 +6,8 @@ import java.util.List;
import org.springframework.web.multipart.MultipartFile;
import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.EqualsAndHashCode;
@ -142,7 +144,38 @@ public class CmmFileDTO {
/**
*
*/
@JsonIgnore
private 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;
@JsonIgnore
private MultipartFile file;
//private List<MultipartFile> files;
}
}

@ -60,6 +60,21 @@ public class CmmFileMgtController {
return mav;
}
@PostMapping(value = "/uploadPaintweb")
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}")
public ModelAndView findFiles(@PathVariable("fileMstId") final String fileMstId) {
if(Checks.isEmpty(fileMstId)) throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, "대상 파일[fileMstId]을 선택해 주세요.");

@ -3,7 +3,7 @@
<configuration scan="true" scanPeriod="3600 seconds">
<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="ROOT_LOG_LEVEL" value="WARN" />
@ -201,7 +201,7 @@
<root level="WARN">
<appender-ref ref="CONSOLE"/>
<appender-ref ref="ASYNC_ROLLING"/>
<!-- <appender-ref ref="ASYNC_ROLLING"/>-->
<!-- <appender-ref ref="ASYNC_ERROR_ROLLING"/>-->
</root>

@ -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/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/framework/js/cmm/cmmUtil.js"></script>
</head>
<body>
<img id="editableImage"/>
@ -27,25 +28,63 @@
}
const initEditor = () => {
const pw = new PaintWeb();
pw = new PaintWeb();
pw.config.guiPlaceholder = document.getElementById('PaintWebTarget');
pw.config.configFile = 'paintweb-config.json';
pw.config.imageLoad = editImg;
pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload
//pw.config.imageSaveURL = "/framework/biz/cmm/file/uploadPaintweb.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.afterImageSave = afterImageSave;
//pw.config.afterImageSave = afterImageSave;
pw.config.imageSave = imageSaveTo;
pw.config.afterImageSave = () => window.close();
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, fileCours} = srcImg.dataset;
let formData = new FormData();
formData.append('interfaceSeqN', interfaceSeqN);
formData.append('ctznSttemntDetailSn', ctznSttemntDetailSn);
formData.append('fileMastrId', fileMastrId);
formData.append('fileId', fileId);
formData.append('orginlFileNm', srcImg.name);
formData.append('fileCours', fileCours);
formData.append('file', file);
cmmAjax({
type: 'post',
url: '<c:out value="/framework/biz/cmm/file/uploadPaintweb.do"/>',
processData: false,
contentType: false,
data: formData,
success: (res) => {
console.log(res)
}
})
return;
}
$(document).ready(function () {
srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>');
editImg = document.getElementById('editableImage');
editImg.src = srcImg.src;
editImg.onload = function () {

@ -2557,7 +2557,7 @@ function PaintWeb (win, doc) {
*
* @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,
cfg = _self.config,
img = _self.image,
@ -2568,8 +2568,9 @@ function PaintWeb (win, doc) {
return false;
}
var extMap = {'jpg' : 'image/jpeg', 'jpeg' : 'image/jpeg', 'png'
: 'image/png', 'gif' : 'image/gif'};
var extMap = {
'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'png': 'image/png', 'gif': 'image/gif'
};
// Detect the MIME type of the image currently loaded.
if (typeof type !== 'string' || !type) {
@ -2588,18 +2589,18 @@ function PaintWeb (win, doc) {
// We consider that other formats than PNG do not support transparencies.
// Thus, we create a new Canvas element for which we set the configured
// background color, and we render the image onto it.
if (type !== 'image/png' || img.zoom!=1) {
if (type !== 'image/png' || img.zoom != 1) {
canvas = doc.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = img.width * img.zoom;
canvas.height = img.height * img.zoom;
canvas.width = img.width * img.zoom;
canvas.height = img.height * img.zoom;
context.fillStyle = cfg.backgroundColor;
context.fillRect(0, 0, img.width, img.height);
context.drawImage(_self.layer.canvas, 0, 0, canvas.width, canvas.height);
context = null;
context = null;
}
try {
@ -2621,16 +2622,34 @@ function PaintWeb (win, doc) {
return false;
}
// by gujc
if (!_self.config.imageSaveURL) {
if (_self.config.afterImageSave) _self.config.afterImageSave();
return;
//--------------------------------------------------------------------
// 변경된 부분
//--------------------------------------------------------------------
if (!_self.config.imageSave) {
if (_self.config.afterImageSave) _self.config.afterImageSave();
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;
//---------------------------------------------------------------------
var ev = new appEvent.imageSave(idata, img.width, img.height),
cancel = _self.events.dispatch(ev);
@ -2638,12 +2657,30 @@ function PaintWeb (win, doc) {
return true;
}
/*
var imgwin = _self.win.open();
if (!imgwin) {
return false;
}
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;
_self.events.dispatch(new appEvent.imageSaveResult(true));
@ -3033,3 +3070,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:
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
}
}

@ -219,6 +219,7 @@ const cmmAjax = (param) => {
,data: param.data
,async: nvl(param.async, true)
,dataType: nvl(param.dataType, "json")
,processData: nvl(param.processData, true)
,contentType: nvl(param.contentType, 'application/x-www-form-urlencoded;charset=UTF-8')
,cache : false
,beforeSend: (jqXhr, settings) => {

@ -6,15 +6,15 @@
* 이미지 url 사용
* @param {object} cmmFileDtls
* @param {string} appendElementId - '#ctznImg'
* @param {object} stmtDtlDTO - 시민신고상세정보
* @param {string} dtlSeq - 시민신고상세순번
* </pre>
*/
function imgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) {
const downloadUrl = '/framework/biz/cmm/file/download.do';
cmmFileDtls.forEach((dtl, idx) => {
const params = "?filename=" +dtl.orginlFileNm+ $.param(dtl);
const title = reqDTO ? dtl.orginlFileNm+'['+reqDTO.ctznSttemntDetailSn+']' : dtl.orginlFileNm;
const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm;
const x = document.createElement("img");
x.setAttribute("src", downloadUrl+params);
x.setAttribute("id", dtl.fileId);
@ -27,6 +27,7 @@ function imgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
x.setAttribute("name", dtl.orginlFileNm);
x.setAttribute("data-file-mastr-id", dtl.fileMastrId);
x.setAttribute("data-file-id", dtl.fileId);
x.setAttribute("data-file-cours", dtl.fileCours);
if(reqDTO) {
x.setAttribute("data-interface-seq-n", reqDTO.interfaceSeqN);
x.setAttribute("data-ctzn-sttemnt-detail-sn", reqDTO.ctznSttemntDetailSn);
@ -44,6 +45,56 @@ function imgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
})
}
function imageSaveTo(idata, width, height){
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);
}
/**
* <pre>
@ -80,7 +131,6 @@ function imgDownload2(cmmFileDtls, appendElementId, dtlSeq) {
x.setAttribute("alt", dtl.orginlFileNm);
//x.setAttribute("id", dtl.fileMastrId);
x.setAttribute("name", dtl.orginlFileNm);
x.setAttribute("fileMastrId", dtl.fileMastrId);
x.setAttribute("ctznSttemntDetailSn", dtlSeq);
x.addEventListener('click', (e)=>{
$('#uploadImage').attr("src", url);

@ -508,7 +508,7 @@ function serialize (formData) {
* </pre>
*/
function downloadImage(img, fileName) {
var imgData = atob(img.src.split(',')[1]),
var imgData = atob(img.split(',')[1]),
len = imgData.length,
buf = new ArrayBuffer(len),
view = new Uint8Array(buf),
@ -529,8 +529,8 @@ function downloadImage(img, fileName) {
//var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.style = 'display: none';
//a.href = url;
a.href = img.src;
a.href = URL.createObjectURL(blob);;
//a.href = img.src;
a.download = fileName;
document.body.appendChild(a);
a.click();
@ -541,3 +541,140 @@ function downloadImage(img, fileName) {
}, 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
})
}

Loading…
Cancel
Save