10 lines
15 KiB
JavaScript
10 lines
15 KiB
JavaScript
/*!
|
|
* FilePondPluginImagePreview 4.2.1
|
|
* Licensed under MIT, https://opensource.org/licenses/MIT/
|
|
* Please visit https://pqina.nl/filepond/ for details.
|
|
*/
|
|
|
|
/* eslint-disable */
|
|
|
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).FilePondPluginImagePreview=t()}(this,function(){"use strict";var e={type:"spring",stiffness:.5,damping:.45,mass:10},t=function(e,t){return{x:e,y:t}},i=function(e,i){return t(e.x-i.x,e.y-i.y)},a=function(e,t){return Math.sqrt(function(e,t){return function(e,t){return e.x*t.x+e.y*t.y}(i(e,t),i(e,t))}(e,t))},r=function(e,i){var a=e,r=i,n=1.5707963267948966-i,o=Math.sin(1.5707963267948966),c=Math.sin(r),s=Math.sin(n),h=Math.cos(n),l=a/o;return t(h*(l*c),h*(l*s))},n=function(e,i,n,o){var c=o.x>.5?1-o.x:o.x,s=o.y>.5?1-o.y:o.y,h=2*c*e.width,l=2*s*e.height,f=function(e,i){var n=e.width,o=e.height,c=r(n,i),s=r(o,i),h=t(e.x+Math.abs(c.x),e.y-Math.abs(c.y)),l=t(e.x+e.width+Math.abs(s.y),e.y+Math.abs(s.x)),f=t(e.x-Math.abs(s.y),e.y+e.height-Math.abs(s.x));return{width:a(h,l),height:a(h,f)}}(i,n);return Math.max(f.width/h,f.height/l)},o=function(t){return t.utils.createView({name:"image-clip",tag:"div",ignoreRect:!0,mixins:{apis:["crop","width","height"],styles:["width","height","opacity"],animations:{opacity:{type:"tween",duration:250}}},create:function(i){var a=i.root,r=i.props;a.ref.image=a.appendChildView(a.createChildView(function(t){return t.utils.createView({name:"image-canvas-wrapper",tag:"div",ignoreRect:!0,mixins:{apis:["crop","width","height"],styles:["originX","originY","translateX","translateY","scaleX","scaleY","rotateZ"],animations:{originX:e,originY:e,scaleX:e,scaleY:e,translateX:e,translateY:e,rotateZ:e}},create:function(e){var i=e.root,a=e.props;a.width=a.image.width,a.height=a.image.height,i.ref.bitmap=i.appendChildView(i.createChildView(function(e){return e.utils.createView({name:"image-bitmap",ignoreRect:!0,mixins:{styles:["scaleX","scaleY"]},create:function(e){var t=e.root,i=e.props;t.appendChild(i.image)}})}(t),{image:a.image}))},write:function(e){var t=e.root,i=e.props.crop.flip,a=t.ref.bitmap;a.scaleX=i.horizontal?-1:1,a.scaleY=i.vertical?-1:1}})}(t),Object.assign({},r)));var n=a.query("GET_IMAGE_PREVIEW_TRANSPARENCY_INDICATOR");null!==n&&(a.element.dataset.transparencyIndicator="grid"===n?n:"color")},write:function(e){var t=e.root,i=e.props,a=e.shouldOptimize,r=i.crop,o=i.width,c=i.height;t.ref.image.crop=r;var s={x:0,y:0,width:o,height:c,center:{x:.5*o,y:.5*c}},h={width:t.ref.image.width,height:t.ref.image.height},l={x:r.center.x*h.width,y:r.center.y*h.height},f={x:s.center.x-h.width*r.center.x,y:s.center.y-h.height*r.center.y},u=2*Math.PI+r.rotation%(2*Math.PI),d=r.aspectRatio||h.height/h.width,g=n(h,function(e,t){var i=e.width,a=i*t;return a>e.height&&(i=(a=e.height)/t),{x:.5*(e.width-i),y:.5*(e.height-a),width:i,height:a}}(s,d),u,r.center),p=r.zoom*g,E=t.ref.image;if(a)return E.originX=null,E.originY=null,E.translateX=null,E.translateY=null,E.rotateZ=null,E.scaleX=null,void(E.scaleY=null);E.originX=l.x,E.originY=l.y,E.translateX=f.x,E.translateY=f.y,E.rotateZ=u,E.scaleX=p,E.scaleY=p}})},c='<svg width="500" height="200" viewBox="0 0 500 200" preserveAspectRatio="none">\n <defs>\n <radialGradient id="gradient-__UID__" cx=".5" cy="1.25" r="1.15">\n <stop offset=\'50%\' stop-color=\'#000000\'/>\n <stop offset=\'56%\' stop-color=\'#0a0a0a\'/>\n <stop offset=\'63%\' stop-color=\'#262626\'/>\n <stop offset=\'69%\' stop-color=\'#4f4f4f\'/>\n <stop offset=\'75%\' stop-color=\'#808080\'/>\n <stop offset=\'81%\' stop-color=\'#b1b1b1\'/>\n <stop offset=\'88%\' stop-color=\'#dadada\'/>\n <stop offset=\'94%\' stop-color=\'#f6f6f6\'/>\n <stop offset=\'100%\' stop-color=\'#ffffff\'/>\n </radialGradient>\n <mask id="mask-__UID__">\n <rect x="0" y="0" width="500" height="200" fill="url(#gradient-__UID__)"></rect>\n </mask>\n </defs>\n <rect x="0" width="500" height="200" fill="currentColor" mask="url(#mask-__UID__)"></rect>\n</svg>',s=!1,h=0,l=function(){self.onmessage=function(e){createImageBitmap(e.data.message.file).then(function(t){self.postMessage({id:e.data.id,message:t},[t])})}},f=function(){self.onmessage=function(e){for(var t=e.data.message.imageData,i=e.data.message.colorMatrix,a=t.data,r=a.length,n=i[0],o=i[1],c=i[2],s=i[3],h=i[4],l=i[5],f=i[6],u=i[7],d=i[8],g=i[9],p=i[10],E=i[11],m=i[12],_=i[13],I=i[14],v=i[15],w=i[16],y=i[17],M=i[18],T=i[19],A=0,R=0,D=0,P=0,G=0;A<r;A+=4)R=a[A]/255,D=a[A+1]/255,P=a[A+2]/255,G=a[A+3]/255,a[A]=Math.max(0,Math.min(255*(R*n+D*o+P*c+G*s+h),255)),a[A+1]=Math.max(0,Math.min(255*(R*l+D*f+P*u+G*d+g),255)),a[A+2]=Math.max(0,Math.min(255*(R*p+D*E+P*m+G*_+I),255)),a[A+3]=Math.max(0,Math.min(255*(R*v+D*w+P*y+G*M+T),255));self.postMessage({id:e.data.id,message:t},[t.data.buffer])}},u={1:function(){return[1,0,0,1,0,0]},2:function(e){return[-1,0,0,1,e,0]},3:function(e,t){return[-1,0,0,-1,e,t]},4:function(e,t){return[1,0,0,-1,0,t]},5:function(){return[0,1,1,0,0,0]},6:function(e,t){return[0,1,-1,0,t,0]},7:function(e,t){return[0,-1,-1,0,t,e]},8:function(e){return[0,-1,1,0,0,e]}},d=function(e,t,i,a){t=Math.round(t),i=Math.round(i);var r=document.createElement("canvas");r.width=t,r.height=i;var n=r.getContext("2d");if(a>=5&&a<=8){var o=[i,t];t=o[0],i=o[1]}return function(e,t,i,a){-1!==a&&e.transform.apply(e,u[a](t,i))}(n,t,i,a),n.drawImage(e,0,0,t,i),r},g=function(e){return/^image/.test(e.type)&&!/svg/.test(e.type)},p=function(e){var t=Math.min(10/e.width,10/e.height),i=document.createElement("canvas"),a=i.getContext("2d"),r=i.width=Math.ceil(e.width*t),n=i.height=Math.ceil(e.height*t);a.drawImage(e,0,0,r,n);var o=null;try{o=a.getImageData(0,0,r,n).data}catch(e){return null}for(var c=o.length,s=0,h=0,l=0,f=0;f<c;f+=4)s+=o[f]*o[f],h+=o[f+1]*o[f+1],l+=o[f+2]*o[f+2];return{r:s=E(s,c),g:h=E(h,c),b:l=E(l,c)}},E=function(e,t){return Math.floor(Math.sqrt(e/(t/4)))},m=function(t){var i=t.utils.createView({name:"image-preview-overlay",tag:"div",ignoreRect:!0,create:function(e){var t=e.root,i=e.props;!s&&document.querySelector("base")&&(c=c.replace(/url\(\#/g,"url("+window.location.href.replace(window.location.hash,"")+"#"),s=!0),h++,t.element.classList.add("filepond--image-preview-overlay-".concat(i.status)),t.element.innerHTML=c.replace(/__UID__/g,h)},mixins:{styles:["opacity"],animations:{opacity:{type:"spring",mass:25}}}}),a=function(t){return t.utils.createView({name:"image-preview",tag:"div",ignoreRect:!0,mixins:{apis:["crop","image"],styles:["translateY","scaleX","scaleY","opacity"],animations:{scaleX:e,scaleY:e,translateY:e,opacity:{type:"tween",duration:400}}},create:function(e){var i=e.root,a=e.props;i.ref.clip=i.appendChildView(i.createChildView(o(t),{image:a.image,crop:a.crop}))},write:function(e){var t=e.root,i=e.props,a=e.shouldOptimize,r=t.ref.clip,n=i.crop,o=i.image;if(r.crop=n,r.opacity=a?0:1,!a&&!t.rect.element.hidden){var c=o.height/o.width,s=n.aspectRatio||c,h=t.rect.inner.width,l=t.rect.inner.height,f=t.query("GET_IMAGE_PREVIEW_HEIGHT"),u=t.query("GET_IMAGE_PREVIEW_MIN_HEIGHT"),d=t.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),g=t.query("GET_PANEL_ASPECT_RATIO"),p=t.query("GET_ALLOW_MULTIPLE");g&&!p&&(f=h*g,s=g);var E=null!==f?f:Math.max(u,Math.min(h*s,d)),m=E/s;m>h&&(E=(m=h)*s),E>l&&(E=l,m=l/s),r.width=m,r.height=E}}})}(t),r=t.utils.createWorker,n=function(e,t,i){return new Promise(function(a){e.ref.imageData||(e.ref.imageData=i.getContext("2d").getImageData(0,0,i.width,i.height));var n=function(e){var t;try{t=new ImageData(e.width,e.height)}catch(i){t=document.createElement("canvas").getContext("2d").createImageData(e.width,e.height)}return t.data.set(new Uint8ClampedArray(e.data)),t}(e.ref.imageData);if(!t||20!==t.length)return i.getContext("2d").putImageData(n,0,0),a();var o=r(f);o.post({imageData:n,colorMatrix:t},function(e){i.getContext("2d").putImageData(e,0,0),o.terminate(),a()},[n.data.buffer])})},u=function(e){var t=e.root,i=e.props,r=e.image,n=i.id,o=t.query("GET_ITEM",{id:n});if(o){var c=o.getMetadata("crop")||{center:{x:.5,y:.5},flip:{horizontal:!1,vertical:!1},zoom:1,rotation:0,aspectRatio:null},s=t.appendChildView(t.createChildView(a,{image:r,crop:c,opacity:0,scaleX:1.15,scaleY:1.15,translateY:15}),t.childViews.length);t.ref.images.push(s),s.opacity=1,s.scaleX=1,s.scaleY=1,s.translateY=0,setTimeout(function(){t.dispatch("DID_IMAGE_PREVIEW_SHOW",{id:n})},250)}},E=function(e){var t=e.root;t.ref.overlayShadow.opacity=1,t.ref.overlayError.opacity=0,t.ref.overlaySuccess.opacity=0},m=function(e){var t=e.root;t.ref.overlayShadow.opacity=.25,t.ref.overlayError.opacity=1};return t.utils.createView({name:"image-preview-wrapper",create:function(e){var t=e.root;t.ref.images=[],t.ref.imageData=null,t.ref.imageViewBin=[],t.ref.overlayShadow=t.appendChildView(t.createChildView(i,{opacity:0,status:"idle"})),t.ref.overlaySuccess=t.appendChildView(t.createChildView(i,{opacity:0,status:"success"})),t.ref.overlayError=t.appendChildView(t.createChildView(i,{opacity:0,status:"failure"}))},styles:["height"],apis:["height"],destroy:function(e){e.root.ref.images.forEach(function(e){e.image.width=1,e.image.height=1})},write:t.utils.createRoute({DID_IMAGE_PREVIEW_DRAW:function(e){var t=e.root,i=t.ref.images[t.ref.images.length-1];i.translateY=0,i.scaleX=1,i.scaleY=1,i.opacity=1},DID_IMAGE_PREVIEW_CONTAINER_CREATE:function(e){var t=e.root,i=e.props.id,a=t.query("GET_ITEM",i);if(a){var r,n,o,c=URL.createObjectURL(a.file);r=c,n=function(e,a){t.dispatch("DID_IMAGE_PREVIEW_CALCULATE_SIZE",{id:i,width:e,height:a})},(o=new Image).onload=function(){var e=o.naturalWidth,t=o.naturalHeight;o=null,n(e,t)},o.src=r}},DID_FINISH_CALCULATE_PREVIEWSIZE:function(e){var t=e.root,i=e.props,a=i.id,o=t.query("GET_ITEM",a);if(o){var c,s=URL.createObjectURL(o.file),h=function(){var e;(e=s,new Promise(function(t,i){var a=new Image;a.crossOrigin="Anonymous",a.onload=function(){t(a)},a.onerror=function(e){i(e)},a.src=e})).then(f)},f=function(e){URL.revokeObjectURL(s);var a=(o.getMetadata("exif")||{}).orientation||-1,r=e.width,c=e.height;if(a>=5&&a<=8){var h=[c,r];r=h[0],c=h[1]}var l=Math.max(1,.75*window.devicePixelRatio),f=t.query("GET_IMAGE_PREVIEW_ZOOM_FACTOR")*l,g=c/r,E=t.rect.element.width,m=t.rect.element.height,_=E,I=_*g;g>1?I=(_=Math.min(r,E*f))*g:_=(I=Math.min(c,m*f))/g;var v=d(e,_,I,a),w=function(){var a=t.query("GET_IMAGE_PREVIEW_CALCULATE_AVERAGE_IMAGE_COLOR")?p(data):null;o.setMetadata("color",a,!0),"close"in e&&e.close(),t.ref.overlayShadow.opacity=1,u({root:t,props:i,image:v})},y=o.getMetadata("filter");y?n(t,y,v).then(w):w()};if(c=o.file,"createImageBitmap"in window&&g(c)){var E=r(l);E.post({file:o.file},function(e){E.terminate(),e?f(e):h()})}else h()}},DID_UPDATE_ITEM_METADATA:function(e){var t=e.root,i=e.props,a=e.action;if(/crop|filter/.test(a.change.key)&&t.ref.images.length){var r=t.query("GET_ITEM",{id:i.id});if(r)if(/filter/.test(a.change.key)){var o=t.ref.images[t.ref.images.length-1];n(t,a.change.value,o.image)}else{if(/crop/.test(a.change.key)){var c=r.getMetadata("crop"),s=t.ref.images[t.ref.images.length-1];if(Math.abs(c.aspectRatio-s.crop.aspectRatio)>1e-5){var h=function(e){var t=e.root,i=t.ref.images.shift();return i.opacity=0,i.translateY=-15,t.ref.imageViewBin.push(i),i}({root:t});u({root:t,props:i,image:(l=h.image,(f=f||document.createElement("canvas")).width=l.width,f.height=l.height,f.getContext("2d").drawImage(l,0,0),f)})}else!function(e){var t=e.root,i=e.props,a=t.query("GET_ITEM",{id:i.id});a&&(t.ref.images[t.ref.images.length-1].crop=a.getMetadata("crop"))}({root:t,props:i})}var l,f}}},DID_THROW_ITEM_LOAD_ERROR:m,DID_THROW_ITEM_PROCESSING_ERROR:m,DID_THROW_ITEM_INVALID:m,DID_COMPLETE_ITEM_PROCESSING:function(e){var t=e.root;t.ref.overlayShadow.opacity=.25,t.ref.overlaySuccess.opacity=1},DID_START_ITEM_PROCESSING:E,DID_REVERT_ITEM_PROCESSING:E},function(e){var t=e.root,i=t.ref.imageViewBin.filter(function(e){return 0===e.opacity});t.ref.imageViewBin=t.ref.imageViewBin.filter(function(e){return e.opacity>0}),i.forEach(function(e){return function(e,t){e.removeChildView(t),t.image.width=1,t.image.height=1,t._destroy()}(t,e)}),i.length=0})})},_=function(e){var t=e.addFilter,i=e.utils,a=i.Type,r=i.createRoute,n=i.isFile,o=m(e);return t("CREATE_VIEW",function(e){var t=e.is,i=e.view,a=e.query;if(t("file")&&a("GET_ALLOW_IMAGE_PREVIEW")){var c=function(e){e.root.ref.shouldRescale=!0};i.registerWriter(r({DID_RESIZE_ROOT:c,DID_STOP_RESIZE:c,DID_LOAD_ITEM:function(e){var t=e.root,r=e.props.id,c=a("GET_ITEM",r);if(c&&n(c.file)&&!c.archived){var s=c.file;if(function(e){return/^image/.test(e.type)}(s)){var h="createImageBitmap"in(window||{}),l=a("GET_IMAGE_PREVIEW_MAX_FILE_SIZE");if(!(!h&&l&&s.size>l)){t.ref.imagePreview=i.appendChildView(i.createChildView(o,{id:r}));var f=t.query("GET_IMAGE_PREVIEW_HEIGHT");f&&t.dispatch("DID_UPDATE_PANEL_HEIGHT",{id:c.id,height:f});var u=!h&&s.size>a("GET_IMAGE_PREVIEW_MAX_INSTANT_PREVIEW_FILE_SIZE");t.dispatch("DID_IMAGE_PREVIEW_CONTAINER_CREATE",{id:r},u)}}}},DID_IMAGE_PREVIEW_CALCULATE_SIZE:function(e){var t=e.root,i=e.action;t.ref.imageWidth=i.width,t.ref.imageHeight=i.height,t.ref.shouldRescale=!0,t.ref.shouldDrawPreview=!0,t.dispatch("KICK")},DID_UPDATE_ITEM_METADATA:function(e){var t=e.root;"crop"===e.action.change.key&&(t.ref.shouldRescale=!0)}},function(e){var t=e.root,i=e.props;t.rect.element.hidden||(t.ref.shouldRescale&&(!function(e,t){if(e.ref.imagePreview){var i=t.id,a=e.query("GET_ITEM",{id:i});if(a){var r=e.query("GET_PANEL_ASPECT_RATIO"),n=e.query("GET_ITEM_PANEL_ASPECT_RATIO"),o=e.query("GET_IMAGE_PREVIEW_HEIGHT");if(!(r||n||o)){var c=e.ref,s=c.imageWidth,h=c.imageHeight;if(s&&h){var l=e.query("GET_IMAGE_PREVIEW_MIN_HEIGHT"),f=e.query("GET_IMAGE_PREVIEW_MAX_HEIGHT"),u=(a.getMetadata("exif")||{}).orientation||-1;if(u>=5&&u<=8){var d=[h,s];s=d[0],h=d[1]}if(!g(a.file)||e.query("GET_IMAGE_PREVIEW_UPSCALE")){var p=2048/s;s*=p,h*=p}var E=h/s,m=(a.getMetadata("crop")||{}).aspectRatio||E,_=Math.max(l,Math.min(h,f)),I=e.rect.element.width,v=Math.min(I*m,_);e.dispatch("DID_UPDATE_PANEL_HEIGHT",{id:a.id,height:v})}}}}}(t,i),t.ref.shouldRescale=!1),t.ref.shouldDrawPreview&&(requestAnimationFrame(function(){t.dispatch("DID_FINISH_CALCULATE_PREVIEWSIZE",{id:i.id})}),t.ref.shouldDrawPreview=!1))}))}}),{options:{allowImagePreview:[!0,a.BOOLEAN],imagePreviewHeight:[null,a.INT],imagePreviewMinHeight:[44,a.INT],imagePreviewMaxHeight:[256,a.INT],imagePreviewMaxFileSize:[null,a.INT],imagePreviewZoomFactor:[2,a.INT],imagePreviewUpscale:[!1,a.BOOLEAN],imagePreviewMaxInstantPreviewFileSize:[1e6,a.INT],imagePreviewTransparencyIndicator:[null,a.STRING],imagePreviewCalculateAverageImageColor:[!1,a.BOOLEAN]}}};return"undefined"!=typeof window&&void 0!==window.document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:_})),_});
|