fabric/dist/src/shapes/Image.min.mjs

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

import{defineProperty as t,objectSpread2 as i,objectWithoutProperties as e}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{getFabricDocument as s,getEnv as h}from"../env/index.min.mjs";import{getFilterBackend as r}from"../filters/FilterBackend.min.mjs";import{SHARED_ATTRIBUTES as n}from"../parser/attributes.min.mjs";import{parseAttributes as l}from"../parser/parseAttributes.min.mjs";import{uid as a}from"../util/internals/uid.min.mjs";import{createCanvasElement as o}from"../util/misc/dom.min.mjs";import{findScaleToFit as c,findScaleToCover as g}from"../util/misc/findScaleTo.min.mjs";import{loadImage as m,enlivenObjects as d,enlivenObjectEnlivables as _}from"../util/misc/objectEnlive.min.mjs";import{parsePreserveAspectRatioAttribute as p}from"../util/misc/svgParsing.min.mjs";import{classRegistry as f}from"../ClassRegistry.min.mjs";import{FabricObject as u}from"./Object/FabricObject.min.mjs";import{WebGLFilterBackend as S}from"../filters/WebGLFilterBackend.min.mjs";import{FILL as w,NONE as E}from"../constants.min.mjs";import{getDocumentFromElement as v}from"../util/dom_misc.min.mjs";import{log as O}from"../util/internals/console.min.mjs";import{cacheProperties as y}from"./Object/defaultValues.min.mjs";const j=["filters","resizeFilter","src","crossOrigin","type"],b={strokeWidth:0,srcFromAttribute:!1,minimumScaleTrigger:.5,cropX:0,cropY:0,imageSmoothing:!0},x=["cropX","cropY"];class C extends u{static getDefaults(){return i(i({},super.getDefaults()),C.ownDefaults)}constructor(i,e){super(),t(this,"_lastScaleX",1),t(this,"_lastScaleY",1),t(this,"_filterScalingX",1),t(this,"_filterScalingY",1),this.filters=[],Object.assign(this,C.ownDefaults),this.setOptions(e),this.cacheKey="texture".concat(a()),this.setElement("string"==typeof i?(this.canvas&&v(this.canvas.getElement())||s()).getElementById(i):i,e)}getElement(){return this._element}setElement(t){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.removeTexture(this.cacheKey),this.removeTexture("".concat(this.cacheKey,"_filtered")),this._element=t,this._originalElement=t,this._setWidthHeight(i),t.classList.add(C.CSS_CANVAS),0!==this.filters.length&&this.applyFilters(),this.resizeFilter&&this.applyResizeFilters()}removeTexture(t){const i=r(!1);i instanceof S&&i.evictCachesForKey(t)}dispose(){super.dispose(),this.removeTexture(this.cacheKey),this.removeTexture("".concat(this.cacheKey,"_filtered")),this._cacheContext=null,["_originalElement","_element","_filteredEl","_cacheCanvas"].forEach((t=>{const i=this[t];i&&h().dispose(i),this[t]=void 0}))}getCrossOrigin(){return this._originalElement&&(this._originalElement.crossOrigin||null)}getOriginalSize(){const t=this.getElement();return t?{width:t.naturalWidth||t.width,height:t.naturalHeight||t.height}:{width:0,height:0}}_stroke(t){if(!this.stroke||0===this.strokeWidth)return;const i=this.width/2,e=this.height/2;t.beginPath(),t.moveTo(-i,-e),t.lineTo(i,-e),t.lineTo(i,e),t.lineTo(-i,e),t.lineTo(-i,-e),t.closePath()}toObject(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];const e=[];return this.filters.forEach((t=>{t&&e.push(t.toObject())})),i(i({},super.toObject([...x,...t])),{},{src:this.getSrc(),crossOrigin:this.getCrossOrigin(),filters:e},this.resizeFilter?{resizeFilter:this.resizeFilter.toObject()}:{})}hasCrop(){return!!this.cropX||!!this.cropY||this.width<this._element.width||this.height<this._element.height}_toSVG(){const t=[],i=this._element,e=-this.width/2,s=-this.height/2;let h=[],r=[],n="",l="";if(!i)return[];if(this.hasCrop()){const t=a();h.push('<clipPath id="imageCrop_'+t+'">\n','\t<rect x="'+e+'" y="'+s+'" width="'+this.width+'" height="'+this.height+'" />\n',"</clipPath>\n"),n=' clip-path="url(#imageCrop_'+t+')" '}if(this.imageSmoothing||(l=' image-rendering="optimizeSpeed"'),t.push("\t<image ","COMMON_PARTS",'xlink:href="'.concat(this.getSvgSrc(!0),'" x="').concat(e-this.cropX,'" y="').concat(s-this.cropY,'" width="').concat(i.width||i.naturalWidth,'" height="').concat(i.height||i.naturalHeight,'"').concat(l).concat(n,"></image>\n")),this.stroke||this.strokeDashArray){const t=this.fill;this.fill=null,r=['\t<rect x="'.concat(e,'" y="').concat(s,'" width="').concat(this.width,'" height="').concat(this.height,'" style="').concat(this.getSvgStyles(),'" />\n')],this.fill=t}return h=this.paintFirst!==w?h.concat(r,t):h.concat(t,r),h}getSrc(t){const i=t?this._element:this._originalElement;return i?i.toDataURL?i.toDataURL():this.srcFromAttribute?i.getAttribute("src")||"":i.src:this.src||""}getSvgSrc(t){return this.getSrc(t)}setSrc(t){let{crossOrigin:i,signal:e}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return m(t,{crossOrigin:i,signal:e}).then((t=>{void 0!==i&&this.set({crossOrigin:i}),this.setElement(t)}))}toString(){return'#<Image: { src: "'.concat(this.getSrc(),'" }>')}applyResizeFilters(){const t=this.resizeFilter,i=this.minimumScaleTrigger,e=this.getTotalObjectScaling(),s=e.x,h=e.y,n=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||s>i&&h>i)return this._element=n,this._filterScalingX=1,this._filterScalingY=1,this._lastScaleX=s,void(this._lastScaleY=h);const l=o(),a=n.width,c=n.height;l.width=a,l.height=c,this._element=l,this._lastScaleX=t.scaleX=s,this._lastScaleY=t.scaleY=h,r().applyFilters([t],n,a,c,this._element),this._filterScalingX=l.width/this._originalElement.width,this._filterScalingY=l.height/this._originalElement.height}applyFilters(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.filters||[];if(t=t.filter((t=>t&&!t.isNeutralState())),this.set("dirty",!0),this.removeTexture("".concat(this.cacheKey,"_filtered")),0===t.length)return this._element=this._originalElement,this._filteredEl=void 0,this._filterScalingX=1,void(this._filterScalingY=1);const i=this._originalElement,e=i.naturalWidth||i.width,s=i.naturalHeight||i.height;if(this._element===this._originalElement){const t=o();t.width=e,t.height=s,this._element=t,this._filteredEl=t}else this._filteredEl&&(this._element=this._filteredEl,this._filteredEl.getContext("2d").clearRect(0,0,e,s),this._lastScaleX=1,this._lastScaleY=1);r().applyFilters(t,this._originalElement,e,s,this._element),this._originalElement.width===this._element.width&&this._originalElement.height===this._element.height||(this._filterScalingX=this._element.width/this._originalElement.width,this._filterScalingY=this._element.height/this._originalElement.height)}_render(t){t.imageSmoothingEnabled=this.imageSmoothing,!0!==this.isMoving&&this.resizeFilter&&this._needsResize()&&this.applyResizeFilters(),this._stroke(t),this._renderPaintInOrder(t)}drawCacheOnCanvas(t){t.imageSmoothingEnabled=this.imageSmoothing,super.drawCacheOnCanvas(t)}shouldCache(){return this.needsItsOwnCache()}_renderFill(t){const i=this._element;if(!i)return;const e=this._filterScalingX,s=this._filterScalingY,h=this.width,r=this.height,n=Math.max(this.cropX,0),l=Math.max(this.cropY,0),a=i.naturalWidth||i.width,o=i.naturalHeight||i.height,c=n*e,g=l*s,m=Math.min(h*e,a-c),d=Math.min(r*s,o-g),_=-h/2,p=-r/2,f=Math.min(h,a/e-n),u=Math.min(r,o/s-l);i&&t.drawImage(i,c,g,m,d,_,p,f,u)}_needsResize(){const t=this.getTotalObjectScaling();return t.x!==this._lastScaleX||t.y!==this._lastScaleY}_resetWidthHeight(){this.set(this.getOriginalSize())}_setWidthHeight(){let{width:t,height:i}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const e=this.getOriginalSize();this.width=t||e.width,this.height=i||e.height}parsePreserveAspectRatioAttribute(){const t=p(this.preserveAspectRatio||""),i=this.width,e=this.height,s={width:i,height:e};let h,r=this._element.width,n=this._element.height,l=1,a=1,o=0,m=0,d=0,_=0;return!t||t.alignX===E&&t.alignY===E?(l=i/r,a=e/n):("meet"===t.meetOrSlice&&(l=a=c(this._element,s),h=(i-r*l)/2,"Min"===t.alignX&&(o=-h),"Max"===t.alignX&&(o=h),h=(e-n*a)/2,"Min"===t.alignY&&(m=-h),"Max"===t.alignY&&(m=h)),"slice"===t.meetOrSlice&&(l=a=g(this._element,s),h=r-i/l,"Mid"===t.alignX&&(d=h/2),"Max"===t.alignX&&(d=h),h=n-e/a,"Mid"===t.alignY&&(_=h/2),"Max"===t.alignY&&(_=h),r=i/l,n=e/a)),{width:r,height:n,scaleX:l,scaleY:a,offsetLeft:o,offsetTop:m,cropX:d,cropY:_}}static fromObject(t,s){let{filters:h,resizeFilter:r,src:n,crossOrigin:l,type:a}=t,o=e(t,j);return Promise.all([m(n,i(i({},s),{},{crossOrigin:l})),h&&d(h,s),r&&d([r],s),_(o,s)]).then((t=>{let[e,s=[],[h]=[],r={}]=t;return new this(e,i(i({},o),{},{src:n,filters:s,resizeFilter:h},r))}))}static fromURL(t){let{crossOrigin:i=null,signal:e}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=arguments.length>2?arguments[2]:void 0;return m(t,{crossOrigin:i,signal:e}).then((t=>new this(t,s)))}static async fromElement(t){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},e=arguments.length>2?arguments[2]:void 0;const s=l(t,this.ATTRIBUTE_NAMES,e);return this.fromURL(s["xlink:href"],i,s).catch((t=>(O("log","Unable to parse Image",t),null)))}}t(C,"type","Image"),t(C,"cacheProperties",[...y,...x]),t(C,"ownDefaults",b),t(C,"CSS_CANVAS","canvas-img"),t(C,"ATTRIBUTE_NAMES",[...n,"x","y","width","height","preserveAspectRatio","xlink:href","crossOrigin","image-rendering"]),f.setClass(C),f.setSVGClass(C);export{C as FabricImage,b as imageDefaultValues};
//# sourceMappingURL=Image.min.mjs.map