mirror of
https://github.com/viliusle/miniPaint.git
synced 2026-02-06 17:06:46 +00:00
download update - safari support?
This commit is contained in:
Vilius
parent
997c125919
commit
d88b30c7ae
39
README.md
39
README.md
@ -13,8 +13,7 @@ Drag and Drop. Key features: layers, transparency, filters, no-flash, open sourc
|
||||
- Opera
|
||||
- IE 10+
|
||||
- Edge
|
||||
|
||||
**IE and Safari**: No - missing full HTML 5 support.
|
||||
- Safari ?
|
||||
|
||||
## Features
|
||||
|
||||
@ -49,42 +48,8 @@ Drag and Drop. Key features: layers, transparency, filters, no-flash, open sourc
|
||||
- Keyboard shortcuts.
|
||||
- Effect browser.
|
||||
- Zoom.
|
||||
- Effects:
|
||||
- Black and White (dithering).
|
||||
- Blur (box, Gaussian, stack, zoom).
|
||||
- Bulge/Pinch.
|
||||
- Colorize.
|
||||
- Denoise.
|
||||
- Desaturate.
|
||||
- Dither.
|
||||
- Dot Screen.
|
||||
- Edge.
|
||||
- Emboss.
|
||||
- Enrich.
|
||||
- Gamma.
|
||||
- Grains.
|
||||
- GrayScale.
|
||||
- Heatmap.
|
||||
- HSL Adjustment.
|
||||
- JPG Compression.
|
||||
- Mosaic.
|
||||
- Oil.
|
||||
- Perspective.
|
||||
- Posterize.
|
||||
- Sepia.
|
||||
- Sharpen.
|
||||
- Solarize.
|
||||
- Tilt Shift.
|
||||
- Vignette.
|
||||
- Vintage.
|
||||
- **Effects**: Black and White, Blur (box, Gaussian, stack, zoom), Bulge/Pinch, Colorize, Denoise, Desaturate, Dither, Dot Screen, Edge, Emboss, Enrich, Gamma, Grains, GrayScale, Heatmap, HSL Adjustment, JPG Compression, Mosaic, Oil, Perspective, Posterize, Sepia, Sharpen, Solarize, Tilt Shift, Vignette, Vintage,
|
||||
|
||||
## Support
|
||||
|
||||
Please use the GitHub issues for support requests, or use mail www.viliusl@gmail.com for contacts.
|
||||
|
||||
## Libraries used
|
||||
|
||||
- Harmony - http://ricardocabello.com/blog/post/689
|
||||
- glfx.js - http://evanw.github.io/glfx.js/
|
||||
- exif.js - https://github.com/jseidelin/exif-js
|
||||
- ImageFilters.js - https://github.com/arahaya/ImageFilters.js
|
||||
|
||||
@ -242,8 +242,10 @@
|
||||
<li class="more">
|
||||
<a class="trn" href="#">Language</a>
|
||||
<ul>
|
||||
<li><a onclick="call_menu(HELP, 'help_translate', 'zh');" href="#">简体中文）</a>
|
||||
<li><a onclick="call_menu(HELP, 'help_translate', 'en');" href="#">English</a>
|
||||
<li><a onclick="call_menu(HELP, 'help_translate', 'lt');" href="#">Lietuvių</a>
|
||||
<li><a onclick="call_menu(HELP, 'help_translate', 'es');" href="#">Español</a>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div class="mid-line"></div></li>
|
||||
@ -267,9 +269,13 @@
|
||||
<script src="js/elements.js"></script>
|
||||
<script src="js/helpers.js"></script>
|
||||
<script src="libs/popup.js"></script>
|
||||
<script src="libs/canvas-toBlob.js"></script>
|
||||
<script src="libs/FileSaver.min.js"></script>
|
||||
<script src="libs/jquery.translate.js"></script>
|
||||
|
||||
<script src="languages/es.js"></script>
|
||||
<script src="languages/lt.js"></script>
|
||||
<script src="languages/zh.js"></script>
|
||||
|
||||
<script src="js/events.js"></script>
|
||||
<script src="js/file.js"></script>
|
||||
|
||||
192
js/file.js
192
js/file.js
@ -194,146 +194,112 @@ function FILE_CLASS() {
|
||||
tempCtx.putImageData(tmp_data, -trim_info.left, -trim_info.top);
|
||||
}
|
||||
|
||||
//prepare data
|
||||
var data;
|
||||
if (user_response.type == 'PNG') {
|
||||
//png - default format
|
||||
var data_header = "image/png";
|
||||
if (HELPER.strpos(fname, '.png') == false)
|
||||
fname = fname + ".png";
|
||||
if(save_mode_for_ie == false)
|
||||
data = tempCanvas.toDataURL("image/png");
|
||||
|
||||
tempCanvas.toBlob(function(blob) {
|
||||
saveAs(blob, fname);
|
||||
});
|
||||
}
|
||||
else if (user_response.type == 'JPG') {
|
||||
//jpg
|
||||
if (HELPER.strpos(fname, '.jpg') == false)
|
||||
fname = fname + ".jpg";
|
||||
|
||||
var quality = parseInt(user_response.quality);
|
||||
if (quality > 100 || quality < 1 || isNaN(quality) == true)
|
||||
quality = 90;
|
||||
quality = quality / 100;
|
||||
var data_header = "image/jpeg";
|
||||
if (HELPER.strpos(fname, '.jpg') == false)
|
||||
fname = fname + ".jpg";
|
||||
if(save_mode_for_ie == false)
|
||||
data = tempCanvas.toDataURL('image/jpeg', quality);
|
||||
}
|
||||
else if (user_response.type == 'BMP') {
|
||||
//bmp - lets hope user really needs this - chrome do not support it
|
||||
var data_header = "image/bmp";
|
||||
if (HELPER.strpos(fname, '.bmp') == false)
|
||||
fname = fname + ".bmp";
|
||||
if(save_mode_for_ie == false)
|
||||
data = tempCanvas.toDataURL("image/bmp");
|
||||
|
||||
tempCanvas.toBlob(function (blob) {
|
||||
saveAs(blob, fname);
|
||||
}, "image/jpeg", quality);
|
||||
}
|
||||
else if (user_response.type == 'WEBP') {
|
||||
//WEBP - new format for chrome only
|
||||
if (HELPER.strpos(fname, '.webp') == false)
|
||||
fname = fname + ".webp";
|
||||
var data_header = "image/webp";
|
||||
if(save_mode_for_ie == false)
|
||||
data = tempCanvas.toDataURL("image/webp");
|
||||
|
||||
//check support
|
||||
if(this.check_format_support(tempCanvas, data_header) == false)
|
||||
return false;
|
||||
|
||||
tempCanvas.toBlob(function (blob) {
|
||||
saveAs(blob, fname);
|
||||
}, data_header);
|
||||
}
|
||||
else if (user_response.type == 'BMP') {
|
||||
//bmp
|
||||
if (HELPER.strpos(fname, '.webp') == false)
|
||||
fname = fname + ".webp";
|
||||
var data_header = "image/bmp";
|
||||
|
||||
//check support
|
||||
if(this.check_format_support(tempCanvas, data_header) == false)
|
||||
return false;
|
||||
|
||||
tempCanvas.toBlob(function (blob) {
|
||||
saveAs(blob, fname);
|
||||
}, data_header);
|
||||
}
|
||||
else if (user_response.type == 'JSON') {
|
||||
//json - full data with layers
|
||||
if(save_mode_for_ie == false){
|
||||
if (HELPER.strpos(fname, '.json') == false)
|
||||
fname = fname + ".json";
|
||||
var data_header = "text/plain";
|
||||
if (HELPER.strpos(fname, '.json') == false)
|
||||
fname = fname + ".json";
|
||||
|
||||
var export_data = {};
|
||||
|
||||
var export_data = {};
|
||||
//basic info
|
||||
export_data.info = {
|
||||
width: WIDTH,
|
||||
height: HEIGHT,
|
||||
};
|
||||
|
||||
//basic info
|
||||
export_data.info = {
|
||||
width: WIDTH,
|
||||
height: HEIGHT,
|
||||
//layers
|
||||
export_data.layers = [];
|
||||
for (var i in LAYER.layers) {
|
||||
var layer = {
|
||||
name:LAYER.layers[i].name,
|
||||
visible: 1,
|
||||
opacity: LAYER.layers[i].opacity,
|
||||
};
|
||||
|
||||
//layers
|
||||
export_data.layers = [];
|
||||
for (var i in LAYER.layers) {
|
||||
var layer = {
|
||||
name:LAYER.layers[i].name,
|
||||
visible: 1,
|
||||
opacity: LAYER.layers[i].opacity,
|
||||
};
|
||||
if (LAYER.layers[i].visible == false)
|
||||
layer.visible = 0;
|
||||
export_data.layers.push(layer);
|
||||
}
|
||||
|
||||
//image data
|
||||
export_data.image_data = [];
|
||||
for (var i in LAYER.layers) {
|
||||
var data_tmp = document.getElementById(LAYER.layers[i].name).toDataURL("image/png");
|
||||
export_data.image_data.push({name: LAYER.layers[i].name, data: data_tmp});
|
||||
}
|
||||
|
||||
var data_json = JSON.stringify(export_data, null, 6);
|
||||
delete export_data;
|
||||
|
||||
var bb = new Blob([data_json], {type: data_header});
|
||||
var data = window.URL.createObjectURL(bb);
|
||||
if (LAYER.layers[i].visible == false)
|
||||
layer.visible = 0;
|
||||
export_data.layers.push(layer);
|
||||
}
|
||||
|
||||
//image data
|
||||
export_data.image_data = [];
|
||||
for (var i in LAYER.layers) {
|
||||
var data_tmp = document.getElementById(LAYER.layers[i].name).toDataURL("image/png");
|
||||
export_data.image_data.push({name: LAYER.layers[i].name, data: data_tmp});
|
||||
}
|
||||
|
||||
var data_json = JSON.stringify(export_data, null, 6);
|
||||
delete export_data;
|
||||
|
||||
var blob = new Blob([data_json], {type: "text/plain"});
|
||||
//var data = window.URL.createObjectURL(blob); //html5
|
||||
saveAs(blob, fname);
|
||||
}
|
||||
else{
|
||||
};
|
||||
|
||||
this.check_format_support = function(canvas, data_header){
|
||||
var data = canvas.toDataURL(data_header);
|
||||
var actualType = data.replace(/^data:([^;]*).*/, '$1');
|
||||
|
||||
if (data_header != actualType && data_header != "text/plain") {
|
||||
//error - no support
|
||||
POP.add({title: "Error:", value: 'Your browser do not support this format.'});
|
||||
POP.show('Sorry', '');
|
||||
delete data;
|
||||
return false;
|
||||
}
|
||||
|
||||
//download
|
||||
if(save_mode_for_ie == true){
|
||||
//IE10+ and Edge - but only as PNG
|
||||
if (user_response.type == 'PNG') {
|
||||
window.navigator.msSaveBlob(tempCanvas.msToBlob(), fname);
|
||||
}
|
||||
else if (user_response.type == 'JPG') {
|
||||
var image = tempCanvas.toDataURL("image/jpeg");
|
||||
image = HELPER.b64toBlob(image.replace("data:image/jpeg;base64,",""),"image/jpeg");
|
||||
return navigator.msSaveBlob(image, fname);
|
||||
}
|
||||
else{
|
||||
//error - no support
|
||||
POP.add({title: "Error:", value: "Format " + user_response.type+" is not supported in this browser"});
|
||||
POP.show('Sorry', '');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
else{
|
||||
//download for firefox, chrome, chrome
|
||||
|
||||
//check file format support
|
||||
var actualType = data.replace(/^data:([^;]*).*/, '$1');
|
||||
if (data_header != actualType && data_header != "text/plain") {
|
||||
//error - no support
|
||||
POP.add({title: "Error:", value: '<span class="trn">Your browser do not support</span> ' + user_response.type});
|
||||
POP.show('Sorry', '');
|
||||
return false;
|
||||
}
|
||||
|
||||
window.URL = window.webkitURL || window.URL;
|
||||
var a = document.createElement('a');
|
||||
var _this = this;
|
||||
if (typeof a.download != "undefined") {
|
||||
//a.download is supported
|
||||
a.setAttribute("id", "save_data");
|
||||
a.download = fname;
|
||||
a.href = data;
|
||||
a.textContent = 'Downloading...';
|
||||
document.getElementById("tmp").appendChild(a);
|
||||
|
||||
//release memory
|
||||
a.onclick = function (e) {
|
||||
_this.save_cleanup(this);
|
||||
};
|
||||
//force click
|
||||
document.querySelector('#save_data').click();
|
||||
}
|
||||
else {
|
||||
//no support for a[download] attribute ...
|
||||
if (user_response.type == 'PNG')
|
||||
window.open(data);
|
||||
else if (user_response.type == 'JPG')
|
||||
window.open(data, quality);
|
||||
}
|
||||
}
|
||||
delete data;
|
||||
return true;
|
||||
};
|
||||
|
||||
this.save_cleanup = function (a) {
|
||||
|
||||
2
libs/FileSaver.min.js
vendored
Normal file
2
libs/FileSaver.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
// https://github.com/eligrey/FileSaver.js - 1.3.2
|
||||
var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,i=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},a=/constructor/i.test(e.HTMLElement),f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},d="application/octet-stream",s=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,s)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(i){u(i)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,s){if(!s){t=p(t)}var v=this,w=t.type,m=w===d,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&a)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;i(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define([],function(){return saveAs})}
|
||||
2
libs/canvas-toBlob.js
Normal file
2
libs/canvas-toBlob.js
Normal file
@ -0,0 +1,2 @@
|
||||
//https://github.com/eligrey/canvas-toBlob.js - 2016-05-26
|
||||
!function(t){"use strict";var o,e=t.Uint8Array,n=t.HTMLCanvasElement,i=n&&n.prototype,s=/\s*;\s*base64\s*(?:;|$)/i,a="toDataURL",l=function(t){for(var n,i,s,a=t.length,l=new e(a/4*3|0),r=0,b=0,d=[0,0],f=0,B=0;a--;)i=t.charCodeAt(r++),n=o[i-43],255!==n&&n!==s&&(d[1]=d[0],d[0]=i,B=B<<6|n,f++,4===f&&(l[b++]=B>>>16,61!==d[1]&&(l[b++]=B>>>8),61!==d[0]&&(l[b++]=B),f=0));return l};e&&(o=new e([62,-1,-1,-1,63,52,53,54,55,56,57,58,59,60,61,-1,-1,-1,0,-1,-1,-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,-1,-1,-1,-1,-1,-1,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51])),!n||i.toBlob&&i.toBlobHD||(i.toBlob||(i.toBlob=function(t,o){if(o||(o="image/png"),this.mozGetAsFile)return void t(this.mozGetAsFile("canvas",o));if(this.msToBlob&&/^\s*image\/png\s*(?:$|;)/i.test(o))return void t(this.msToBlob());var n,i=Array.prototype.slice.call(arguments,1),r=this[a].apply(this,i),b=r.indexOf(","),d=r.substring(b+1),f=s.test(r.substring(0,b));Blob.fake?(n=new Blob,f?n.encoding="base64":n.encoding="URI",n.data=d,n.size=d.length):e&&(n=f?new Blob([l(d)],{type:o}):new Blob([decodeURIComponent(d)],{type:o})),t(n)}),!i.toBlobHD&&i.toDataURLHD?i.toBlobHD=function(){a="toDataURLHD";var t=this.toBlob();return a="toDataURL",t}:i.toBlobHD=i.toBlob)}("undefined"!=typeof self&&self||"undefined"!=typeof window&&window||this.content||this);
|
||||
Loading…
Reference in New Issue
Block a user