|
|
|
|
@ -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 {
|
|
|
|
|
@ -2616,21 +2617,50 @@ function PaintWeb (win, doc) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas = null;
|
|
|
|
|
|
|
|
|
|
// alert('idata~~~'+idata)
|
|
|
|
|
if (!idata || idata === 'data:,') {
|
|
|
|
|
//alert('idata~~~'+idata)
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// by gujc
|
|
|
|
|
if (!_self.config.imageSaveURL) {
|
|
|
|
|
if (_self.config.afterImageSave) _self.config.afterImageSave();
|
|
|
|
|
return;
|
|
|
|
|
// TODO: save image
|
|
|
|
|
//--------------------------------------------------------------------
|
|
|
|
|
// 변경된 부분
|
|
|
|
|
//--------------------------------------------------------------------
|
|
|
|
|
if (!_self.config.imageSave) {
|
|
|
|
|
if (_self.config.afterImageSave) _self.config.afterImageSave();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let fileType = 'image/';
|
|
|
|
|
const regx = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
|
|
|
|
|
let name = (/[^(/|\\)]*$/).exec(idata)[0]
|
|
|
|
|
// 20220915_5df30439017240afbc7081ae9bfbfa2f 와 같은 형태인 경우 imageName으로
|
|
|
|
|
if(!regx.exec(name)){
|
|
|
|
|
name = srcImg.name;
|
|
|
|
|
}
|
|
|
|
|
fileType += regx.test(name) ? regx.exec(name)[0].replace('.', '') : 'jpg'
|
|
|
|
|
// mine type 'jpg' > jpeg로 변경
|
|
|
|
|
fileType = fileType.replace('image/jpg', 'image/jpeg');
|
|
|
|
|
const bstr = atob(idata.split(",")[1]);
|
|
|
|
|
let n = bstr.length;
|
|
|
|
|
const u8arr = new Uint8Array(n);
|
|
|
|
|
|
|
|
|
|
while(n--) {
|
|
|
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
|
|
|
}
|
|
|
|
|
const file = new File([u8arr], name, {type:fileType});
|
|
|
|
|
//alert(`fileCpcty=${srcImg.dataset.fileCpcty},fileSize=${file.size}`)
|
|
|
|
|
|
|
|
|
|
_self.config.imageSave(file, img.width, img.height, doc, _self);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
imageSaveTo(idata, img.width, img.height);
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
|
|
//---------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ev = new appEvent.imageSave(idata, img.width, img.height),
|
|
|
|
|
cancel = _self.events.dispatch(ev);
|
|
|
|
|
|
|
|
|
|
@ -2638,78 +2668,37 @@ 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));
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
const map = new Map(Object.entries(srcImg.dataset));
|
|
|
|
|
let pr = '';
|
|
|
|
|
map.forEach((v,k)=>{
|
|
|
|
|
//pr += ` ${k}="${v}";`;
|
|
|
|
|
pr += ` name="${k}"${crlf}${crlf}${v};`;
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
// '; filename="' + filename + '";' + pr + 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 + crlf + 'Content-Disposition: form-data; name="filename"' + crlf + crlf + filename + pr;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* image rotation. add by gujc.
|
|
|
|
|
*/
|
|
|
|
|
@ -3032,4 +3021,3 @@ 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:
|
|
|
|
|
|
|
|
|
|
|
Kurt92
2 years ago
