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