From d88b30c7aee9a4ab504df00a45037b2ead856d81 Mon Sep 17 00:00:00 2001 From: Vilius Date: Fri, 17 Jun 2016 00:12:45 +0300 Subject: [PATCH] download update - safari support? --- README.md | 39 +-------- index.html | 6 ++ js/file.js | 192 +++++++++++++++++------------------------- libs/FileSaver.min.js | 2 + libs/canvas-toBlob.js | 2 + 5 files changed, 91 insertions(+), 150 deletions(-) create mode 100644 libs/FileSaver.min.js create mode 100644 libs/canvas-toBlob.js diff --git a/README.md b/README.md index ff8764e..9c213a3 100644 --- a/README.md +++ b/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 diff --git a/index.html b/index.html index fc15be2..de48c21 100644 --- a/index.html +++ b/index.html @@ -242,8 +242,10 @@
  • Language
    • @@ -267,9 +269,13 @@ + + + + diff --git a/js/file.js b/js/file.js index 08e9815..1784884 100644 --- a/js/file.js +++ b/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: 'Your browser do not support ' + 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) { diff --git a/libs/FileSaver.min.js b/libs/FileSaver.min.js new file mode 100644 index 0000000..e720d03 --- /dev/null +++ b/libs/FileSaver.min.js @@ -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})} \ No newline at end of file diff --git a/libs/canvas-toBlob.js b/libs/canvas-toBlob.js new file mode 100644 index 0000000..2266eb1 --- /dev/null +++ b/libs/canvas-toBlob.js @@ -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); \ No newline at end of file