sp-image-editor
Version:
React component version of filerobot image editor (FIE).
1 lines • 4.91 kB
JavaScript
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["filter"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import Konva from"konva";import{HIDE_LOADER,SET_SAVED}from"../actions";import{ELLIPSE_CROP,IMAGE_NODE_ID,SUPPORTED_IMAGE_TYPES,TOOLS_IDS}from"../utils/constants";import extractCurrentDesignState from"../utils/extractCurrentDesignState";import mapCropBox from"../utils/mapCropBox";import getSizeAfterRotation from"../utils/getSizeAfterRotation";import imageToBase64 from"../utils/imageToBase64";import getFileFullName from"../utils/getFileFullName";import operationsToCloudimageUrl from"../utils/operationsToCloudimageUrl";import useStore from"./useStore";var useTransformedImgData=function(){var a=useStore(),b=a.dispatch,c=a.designLayer,d=a.shownImageDimensions,e=a.originalImage,f=a.resize,g=void 0===f?{}:f,h=a.adjustments,i=void 0===h?{}:h,j=i.crop,k=void 0===j?{}:j,l=i.rotation,m=void 0===l?0:l,n=a.config,o=n.savingPixelRatio,p=n.previewPixelRatio,q=n.forceToPngInEllipticalCrop,r=n.defaultSavedImageType,s=n.useCloudimage,t=n.cloudimage,u=n[TOOLS_IDS.CROP];return s?function(){var b,c,f=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},g=extractCurrentDesignState(a),h=g.filter,i=_objectWithoutProperties(g,_excluded),j=operationsToCloudimageUrl(t,i,d,e,u),l=mapCropBox({x:k.x,y:k.y,width:k.width,height:k.height},d,e),m={cloudimageUrl:j,width:(null===f||void 0===f||null===(b=f.size)||void 0===b?void 0:b.width)||l.width,height:(null===f||void 0===f||null===(c=f.size)||void 0===c?void 0:c.height)||l.height};return{imageData:m,designState:i}}:function(){var f=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},h=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],i=!!(2<arguments.length&&void 0!==arguments[2])&&arguments[2],j=_objectSpread({size:g},f);Konva.pixelRatio=h||o;var l=c.attrs,n=l.clipWidth,s=l.clipHeight,t=l.clipX,u=l.clipY;c.setAttr("isSaving",!0);var v=c.getStage().clone({width:e.width,height:e.height,scaleX:1,scaleY:1}),w=_slicedToArray(v.children,1),x=w[0];v.children[1].destroy();var y=v.findOne("#".concat(IMAGE_NODE_ID));y.cache();var z={x:v.width()/d.width,y:v.height()/d.height};x.setAttrs({rotation:0,offsetX:0,offsetY:0,x:0,y:0,scaleX:z.x,scaleY:z.y});var A=_objectSpread(_objectSpread({},(!j.name||!j.extension)&&getFileFullName(e.name,q&&k.ratio===ELLIPSE_CROP?"png":SUPPORTED_IMAGE_TYPES.includes(null===r||void 0===r?void 0:r.toLowerCase())&&r)),j),B=A.name,C=A.extension,D=A.quality,E=void 0===D?92:D,F=A.size,G=void 0===F?{}:F,H=["jpeg","jpg","webp"].includes(C),I=mapCropBox(k.noEffect?{x:0,y:0}:{x:k.x||t,y:k.y||u,width:k.width||n,height:k.height||s},d,v.attrs),J=getSizeAfterRotation(I.width,I.height,m);if(v.setAttrs({offsetX:I.width/2+I.x,offsetY:I.height/2+I.y,width:J.width,height:J.height,x:J.width/2,y:J.height/2,rotation:m}),G.width){var K=G.width/v.width();v.setAttrs({scaleX:K,width:G.width,x:v.x()*Math.abs(K)})}if(G.height){var L=G.height/v.height();v.setAttrs({scaleY:L,height:G.height,y:v.y()*Math.abs(L)})}var M=_objectSpread({mimeType:"image/".concat("jpg"===C?"jpeg":C)},H?{quality:E}:{}),N=v.toCanvas(M),O=v.toDataURL(M),P=_objectSpread(_objectSpread({},extractCurrentDesignState(a)),{},{shownImageDimensions:{width:a.shownImageDimensions.width,height:a.shownImageDimensions.height,scaledBy:a.shownImageDimensions.scaledBy}});P.filter&&(P.filter=P.filter.filterName||P.filter.name),P.finetunes=P.finetunes.map(function(a){return a.finetuneName||a.name}),Object.keys(P.annotations).forEach(function(a){var b,c=P.annotations[a],d=c.name===TOOLS_IDS.IMAGE&&(null===(b=c.image)||void 0===b?void 0:b.src);d&&d.startsWith("blob:")?P.annotations[a].image=imageToBase64(c.image):c.image instanceof HTMLImageElement&&(P.annotations[a].image=d)});var Q=_objectSpread({fullName:"".concat(B,".").concat(C),name:B,extension:C,mimeType:"image/".concat(C),imageCanvas:N,imageBase64:O,width:G.width||I.width,height:G.height||I.height},H?{quality:E}:{});c.setAttr("isSaving",!1),b({type:SET_SAVED}),y.clearCache(),v.destroy(),Konva.pixelRatio=p;var R=function(){b({type:HIDE_LOADER})};return i||R(),{imageData:Q,designState:P,hideLoadingSpinner:R}}};export default useTransformedImgData;