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