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 r}from"../env/index.min.mjs";import{getFilterBackend as h}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{createCanvasElementFor as o}from"../util/misc/dom.min.mjs";import{findScaleToFit as c,findScaleToCover as m}from"../util/misc/findScaleTo.min.mjs";import{loadImage as g,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 v,NONE as w}from"../constants.min.mjs";import{getDocumentFromElement as E}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&&E(this.canvas.getElement())||s()).getElementById(i):i,e)}getElement(){return this._element}setElement(t){var i;let e=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(e),null===(i=t.classList)||void 0===i||i.add(C.CSS_CANVAS),0!==this.filters.length&&this.applyFilters(),this.resizeFilter&&this.applyResizeFilters()}removeTexture(t){const i=h(!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&&r().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 r=[],h=[],n="",l="";if(!i)return[];if(this.hasCrop()){const t=a();r.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,h=['\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 r=this.paintFirst!==v?r.concat(h,t):r.concat(t,h),r}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 g(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,r=e.y,n=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||s>i&&r>i)return this._element=n,this._filterScalingX=1,this._filterScalingY=1,this._lastScaleX=s,void(this._lastScaleY=r);const l=o(n),{width:a,height:c}=n;this._element=l,this._lastScaleX=t.scaleX=s,this._lastScaleY=t.scaleY=r,h().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({width:e,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);h().applyFilters(t,this._originalElement,e,s,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,r=this.width,h=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,m=l*s,g=Math.min(r*e,a-c),d=Math.min(h*s,o-m),_=-r/2,p=-h/2,f=Math.min(r,a/e-n),u=Math.min(h,o/s-l);i&&t.drawImage(i,c,m,g,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 r,h=this._element.width,n=this._element.height,l=1,a=1,o=0,g=0,d=0,_=0;return!t||t.alignX===w&&t.alignY===w?(l=i/h,a=e/n):("meet"===t.meetOrSlice&&(l=a=c(this._element,s),r=(i-h*l)/2,"Min"===t.alignX&&(o=-r),"Max"===t.alignX&&(o=r),r=(e-n*a)/2,"Min"===t.alignY&&(g=-r),"Max"===t.alignY&&(g=r)),"slice"===t.meetOrSlice&&(l=a=m(this._element,s),r=h-i/l,"Mid"===t.alignX&&(d=r/2),"Max"===t.alignX&&(d=r),r=n-e/a,"Mid"===t.alignY&&(_=r/2),"Max"===t.alignY&&(_=r),h=i/l,n=e/a)),{width:h,height:n,scaleX:l,scaleY:a,offsetLeft:o,offsetTop:g,cropX:d,cropY:_}}static fromObject(t,s){let{filters:r,resizeFilter:h,src:n,crossOrigin:l,type:a}=t,o=e(t,j);return Promise.all([g(n,i(i({},s),{},{crossOrigin:l})),r&&d(r,s),h&&d([h],s),_(o,s)]).then((t=>{let[e,s=[],[r]=[],h={}]=t;return new this(e,i(i({},o),{},{src:n,filters:s,resizeFilter:r},h))}))}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 g(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"]||s.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","href","crossOrigin","image-rendering"]),f.setClass(C),f.setSVGClass(C);export{C as FabricImage,b as imageDefaultValues};
//# sourceMappingURL=Image.min.mjs.map