Buckets:

download
raw
47.8 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;utils/image&quot;,&quot;local&quot;:&quot;utilsimage&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Classes&quot;,&quot;local&quot;:&quot;classes&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;RawImage&quot;,&quot;local&quot;:&quot;rawimage&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;RawImage.constructor(data, width, height, channels)&quot;,&quot;local&quot;:&quot;rawimageconstructordata-width-height-channels&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.size&quot;,&quot;local&quot;:&quot;rawimagesize&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.read(input)&quot;,&quot;local&quot;:&quot;rawimagereadinput&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromCanvas(canvas)&quot;,&quot;local&quot;:&quot;rawimagefromcanvascanvas&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromURL(url)&quot;,&quot;local&quot;:&quot;rawimagefromurlurl&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromBlob(blob)&quot;,&quot;local&quot;:&quot;rawimagefromblobblob&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromTensor(tensor)&quot;,&quot;local&quot;:&quot;rawimagefromtensortensor&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.grayscale()&quot;,&quot;local&quot;:&quot;rawimagegrayscale&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.rgb()&quot;,&quot;local&quot;:&quot;rawimagergb&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.rgba()&quot;,&quot;local&quot;:&quot;rawimagergba&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.putAlpha(mask)&quot;,&quot;local&quot;:&quot;rawimageputalphamask&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.resize(width, height, options)&quot;,&quot;local&quot;:&quot;rawimageresizewidth-height-options&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.split()&quot;,&quot;local&quot;:&quot;rawimagesplit&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.clone()&quot;,&quot;local&quot;:&quot;rawimageclone&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.convert(numChannels)&quot;,&quot;local&quot;:&quot;rawimageconvertnumchannels&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.save(path)&quot;,&quot;local&quot;:&quot;rawimagesavepath&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.toSharp()&quot;,&quot;local&quot;:&quot;rawimagetosharp&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4}],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Constants&quot;,&quot;local&quot;:&quot;constants&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;load_image : typeof RawImage.read&quot;,&quot;local&quot;:&quot;loadimage--typeof-rawimageread&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2}],&quot;depth&quot;:1}">
<link href="/docs/transformers.js/pr_1665/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/entry/start.cb58eb6f.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/scheduler.6efaaf90.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/singletons.08239980.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/paths.611c3944.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/entry/app.9eafcf9d.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/preload-helper.4b821645.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/index.eb3e1f0f.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/nodes/0.d361a553.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/each.e59479a4.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/nodes/19.81f5392f.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.699f2734.js">
<link rel="modulepreload" href="/docs/transformers.js/pr_1665/en/_app/immutable/chunks/CodeBlock.b303f0b9.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;utils/image&quot;,&quot;local&quot;:&quot;utilsimage&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Classes&quot;,&quot;local&quot;:&quot;classes&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;RawImage&quot;,&quot;local&quot;:&quot;rawimage&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;RawImage.constructor(data, width, height, channels)&quot;,&quot;local&quot;:&quot;rawimageconstructordata-width-height-channels&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.size&quot;,&quot;local&quot;:&quot;rawimagesize&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.read(input)&quot;,&quot;local&quot;:&quot;rawimagereadinput&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromCanvas(canvas)&quot;,&quot;local&quot;:&quot;rawimagefromcanvascanvas&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromURL(url)&quot;,&quot;local&quot;:&quot;rawimagefromurlurl&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromBlob(blob)&quot;,&quot;local&quot;:&quot;rawimagefromblobblob&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.fromTensor(tensor)&quot;,&quot;local&quot;:&quot;rawimagefromtensortensor&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.grayscale()&quot;,&quot;local&quot;:&quot;rawimagegrayscale&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.rgb()&quot;,&quot;local&quot;:&quot;rawimagergb&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.rgba()&quot;,&quot;local&quot;:&quot;rawimagergba&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.putAlpha(mask)&quot;,&quot;local&quot;:&quot;rawimageputalphamask&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.resize(width, height, options)&quot;,&quot;local&quot;:&quot;rawimageresizewidth-height-options&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.split()&quot;,&quot;local&quot;:&quot;rawimagesplit&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.clone()&quot;,&quot;local&quot;:&quot;rawimageclone&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.convert(numChannels)&quot;,&quot;local&quot;:&quot;rawimageconvertnumchannels&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.save(path)&quot;,&quot;local&quot;:&quot;rawimagesavepath&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4},{&quot;title&quot;:&quot;RawImage.toSharp()&quot;,&quot;local&quot;:&quot;rawimagetosharp&quot;,&quot;sections&quot;:[],&quot;depth&quot;:4}],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Constants&quot;,&quot;local&quot;:&quot;constants&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;load_image : typeof RawImage.read&quot;,&quot;local&quot;:&quot;loadimage--typeof-rawimageread&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2}],&quot;depth&quot;:1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <h1 class="relative group"><a id="utilsimage" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#utilsimage"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>utils/image</span></h1> <p data-svelte-h="svelte-1g03ds">Image I/O and manipulation.</p> <p data-svelte-h="svelte-1ry60dv"><code>RawImage</code> wraps a raw pixel buffer with width, height, and channel metadata;
use <code>load_image()</code> to decode from paths, URLs, or Blobs, and the instance
methods to resize, convert, and save.</p> <h2 class="relative group"><a id="classes" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#classes"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Classes</span></h2> <a id="module_utils/image.RawImage"></a> <h3 class="relative group"><a id="rawimage" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimage"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage</span></h3> <p data-svelte-h="svelte-1cewjkd">Represents an image stored as a raw pixel buffer.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-javascript "><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> { <span class="hljs-title class_">RawImage</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@huggingface/transformers&#x27;</span>;
<span class="hljs-keyword">const</span> image = <span class="hljs-keyword">await</span> <span class="hljs-title class_">RawImage</span>.<span class="hljs-title function_">read</span>(<span class="hljs-string">&#x27;https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/artemis.jpeg&#x27;</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(image.<span class="hljs-property">width</span>, image.<span class="hljs-property">height</span>, image.<span class="hljs-property">channels</span>);<!-- HTML_TAG_END --></pre></div> <a id="module_utils/image.RawImage.constructor"></a> <h4 class="relative group"><a id="rawimageconstructordata-width-height-channels" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimageconstructordata-width-height-channels"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.constructor(data, width, height, channels)</span></h4> <p data-svelte-h="svelte-36fe9a">Create a new <code>RawImage</code> object.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-1tsna0g"><li><code>data</code> (<code>Uint8ClampedArray</code> | <code>Uint8Array</code>) — The pixel data.</li> <li><code>width</code> (<code>number</code>) — The width of the image.</li> <li><code>height</code> (<code>number</code>) — The height of the image.</li> <li><code>channels</code> (<code>1</code> | <code>2</code> | <code>3</code> | <code>4</code>) — The number of channels.</li></ul> <h4 class="relative group"><a id="rawimagesize" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagesize"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.size</span></h4> <p data-svelte-h="svelte-2j0n9s">Returns the size of the image (width, height).</p> <a id="module_utils/image.RawImage.read"></a> <h4 class="relative group"><a id="rawimagereadinput" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagereadinput"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.read(input)</span></h4> <p data-svelte-h="svelte-5659h9">Helper method for reading an image from a variety of input types.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-1j1rbvw"><li><code>input</code> (<a href="./image#module_utils/image.RawImage"><code>RawImage</code></a> | <code>string</code> | <code>URL</code> | <code>Blob</code> | <code>HTMLCanvasElement</code> | <code>OffscreenCanvas</code>)</li></ul> <p data-svelte-h="svelte-pcfkj0"><strong>Returns:</strong> <code>Promise</code>&lt;<a href="./image#module_utils/image.RawImage"><code>RawImage</code></a>&gt; — The image object.</p> <p data-svelte-h="svelte-14z54gq"><strong>Example:</strong> Read image from a URL.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-javascript "><!-- HTML_TAG_START --><span class="hljs-keyword">let</span> image = <span class="hljs-keyword">await</span> <span class="hljs-title class_">RawImage</span>.<span class="hljs-title function_">read</span>(<span class="hljs-string">&#x27;https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/football-match.jpg&#x27;</span>);
<span class="hljs-comment">// RawImage {</span>
<span class="hljs-comment">// &quot;data&quot;: Uint8ClampedArray [ 25, 25, 25, 19, 19, 19, ... ],</span>
<span class="hljs-comment">// &quot;width&quot;: 800,</span>
<span class="hljs-comment">// &quot;height&quot;: 533,</span>
<span class="hljs-comment">// &quot;channels&quot;: 3</span>
<span class="hljs-comment">// }</span><!-- HTML_TAG_END --></pre></div> <a id="module_utils/image.RawImage.fromCanvas"></a> <h4 class="relative group"><a id="rawimagefromcanvascanvas" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagefromcanvascanvas"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.fromCanvas(canvas)</span></h4> <p data-svelte-h="svelte-mjjjch">Read an image from a canvas.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-1qr4dt"><li><code>canvas</code> (<code>HTMLCanvasElement</code> | <code>OffscreenCanvas</code>) — The canvas to read the image from.</li></ul> <p data-svelte-h="svelte-26nj1q"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a> — The image object.</p> <a id="module_utils/image.RawImage.fromURL"></a> <h4 class="relative group"><a id="rawimagefromurlurl" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagefromurlurl"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.fromURL(url)</span></h4> <p data-svelte-h="svelte-1355z3u">Read an image from a URL or file path.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-ad0xcp"><li><code>url</code> (<code>string</code> | <code>URL</code>) — The URL or file path to read the image from.</li></ul> <p data-svelte-h="svelte-pcfkj0"><strong>Returns:</strong> <code>Promise</code>&lt;<a href="./image#module_utils/image.RawImage"><code>RawImage</code></a>&gt; — The image object.</p> <a id="module_utils/image.RawImage.fromBlob"></a> <h4 class="relative group"><a id="rawimagefromblobblob" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagefromblobblob"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.fromBlob(blob)</span></h4> <p data-svelte-h="svelte-1s704mu">Helper method to create a new Image from a blob.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-na3dxr"><li><code>blob</code> (<code>Blob</code>) — The blob to read the image from.</li></ul> <p data-svelte-h="svelte-pcfkj0"><strong>Returns:</strong> <code>Promise</code>&lt;<a href="./image#module_utils/image.RawImage"><code>RawImage</code></a>&gt; — The image object.</p> <a id="module_utils/image.RawImage.fromTensor"></a> <h4 class="relative group"><a id="rawimagefromtensortensor" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagefromtensortensor"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.fromTensor(tensor)</span></h4> <p data-svelte-h="svelte-nwy2y">Helper method to create a new Image from a tensor</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-en9flb"><li><code>tensor</code> (<a href="./tensor#module_utils/tensor.Tensor"><code>Tensor</code></a>)</li></ul> <a id="module_utils/image.RawImage.grayscale"></a> <h4 class="relative group"><a id="rawimagegrayscale" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagegrayscale"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.grayscale()</span></h4> <p data-svelte-h="svelte-1owjjfe">Convert the image to grayscale format.</p> <p data-svelte-h="svelte-jlx8b9"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a><code>this</code> to support chaining.</p> <a id="module_utils/image.RawImage.rgb"></a> <h4 class="relative group"><a id="rawimagergb" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagergb"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.rgb()</span></h4> <p data-svelte-h="svelte-qyo04e">Convert the image to RGB format.</p> <p data-svelte-h="svelte-jlx8b9"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a><code>this</code> to support chaining.</p> <a id="module_utils/image.RawImage.rgba"></a> <h4 class="relative group"><a id="rawimagergba" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagergba"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.rgba()</span></h4> <p data-svelte-h="svelte-19kp14j">Convert the image to RGBA format.</p> <p data-svelte-h="svelte-jlx8b9"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a><code>this</code> to support chaining.</p> <a id="module_utils/image.RawImage.putAlpha"></a> <h4 class="relative group"><a id="rawimageputalphamask" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimageputalphamask"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.putAlpha(mask)</span></h4> <p data-svelte-h="svelte-1r4j26z">Apply an alpha mask to the image. Operates in place.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-jww5cc"><li><code>mask</code> (<a href="./image#module_utils/image.RawImage"><code>RawImage</code></a>) — The mask to apply. It should have a single channel.</li></ul> <p data-svelte-h="svelte-c01cd6"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a> — The masked image.</p> <p data-svelte-h="svelte-sl4r8m"><strong>Throws</strong></p> <ul data-svelte-h="svelte-uxnr6t"><li><code>Error</code> — If the mask is not the same size as the image.</li> <li><code>Error</code> — If the image does not have 4 channels.</li> <li><code>Error</code> — If the mask is not a single channel.</li></ul> <a id="module_utils/image.RawImage.resize"></a> <h4 class="relative group"><a id="rawimageresizewidth-height-options" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimageresizewidth-height-options"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.resize(width, height, options)</span></h4> <p data-svelte-h="svelte-s4dm9o">Resize the image to the given dimensions. This method uses the canvas API to perform the resizing.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-ha2j5"><li><code>width</code> (<code>number</code>) — The width of the new image. <code>null</code> or <code>-1</code> will preserve the aspect ratio.</li> <li><code>height</code> (<code>number</code>) — The height of the new image. <code>null</code> or <code>-1</code> will preserve the aspect ratio.</li> <li><code>options</code> (<code>Object</code>) — Additional options for resizing.
<ul><li><code>resample</code> (<code>0</code> | <code>1</code> | <code>2</code> | <code>3</code> | <code>4</code> | <code>5</code> | <code>string</code>) <em>optional</em> — The resampling method to use.</li></ul></li></ul> <p data-svelte-h="svelte-1ebwb3z"><strong>Returns:</strong> <code>Promise</code>&lt;<a href="./image#module_utils/image.RawImage"><code>RawImage</code></a>&gt;<code>this</code> to support chaining.</p> <a id="module_utils/image.RawImage.split"></a> <h4 class="relative group"><a id="rawimagesplit" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagesplit"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.split()</span></h4> <p data-svelte-h="svelte-2m63ix">Split this image into individual bands. This method returns an array of individual image bands from an image.
For example, splitting an “RGB” image creates three new images each containing a copy of one of the original bands (red, green, blue).</p> <p data-svelte-h="svelte-k44jcf">Inspired by PIL’s <code>Image.split()</code> <a href="https://pillow.readthedocs.io/en/latest/reference/Image.html#PIL.Image.Image.split" rel="nofollow">function</a>.</p> <p data-svelte-h="svelte-4z3467"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a>[] — An array containing bands.</p> <a id="module_utils/image.RawImage.clone"></a> <h4 class="relative group"><a id="rawimageclone" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimageclone"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.clone()</span></h4> <p data-svelte-h="svelte-1eu6jk3">Clone the image</p> <p data-svelte-h="svelte-j16bwe"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a> — The cloned image</p> <a id="module_utils/image.RawImage.convert"></a> <h4 class="relative group"><a id="rawimageconvertnumchannels" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimageconvertnumchannels"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.convert(numChannels)</span></h4> <p data-svelte-h="svelte-5ze294">Helper method for converting image to have a certain number of channels</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-2tseql"><li><code>numChannels</code> (<code>number</code>) — The number of channels. Must be 1, 3, or 4.</li></ul> <p data-svelte-h="svelte-jlx8b9"><strong>Returns:</strong> <a href="./image#module_utils/image.RawImage"><code>RawImage</code></a><code>this</code> to support chaining.</p> <a id="module_utils/image.RawImage.save"></a> <h4 class="relative group"><a id="rawimagesavepath" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagesavepath"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.save(path)</span></h4> <p data-svelte-h="svelte-119su55">Save the image to the given path.</p> <p data-svelte-h="svelte-11fqvcp"><strong>Parameters</strong></p> <ul data-svelte-h="svelte-kfrwb"><li><code>path</code> (<code>string</code>) — The path to save the image to.</li></ul> <p data-svelte-h="svelte-1h481nl"><strong>Returns:</strong> <code>Promise</code>&lt;<code>void</code>&gt;</p> <a id="module_utils/image.RawImage.toSharp"></a> <h4 class="relative group"><a id="rawimagetosharp" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#rawimagetosharp"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>RawImage.toSharp()</span></h4> <p data-svelte-h="svelte-76c9ym">Convert the image to a Sharp instance.</p> <p data-svelte-h="svelte-1u5lhxd"><strong>Returns:</strong> <code>Sharp</code> — The Sharp instance.</p> <h2 class="relative group"><a id="constants" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#constants"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Constants</span></h2> <a id="module_utils/image.load_image"></a> <h3 class="relative group"><a id="loadimage--typeof-rawimageread" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#loadimage--typeof-rawimageread"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>load_image : typeof RawImage.read</span></h3> <p data-svelte-h="svelte-1hpq4cn">Load an image from a URL, file path, <code>Blob</code>, <code>HTMLCanvasElement</code>, or
<code>OffscreenCanvas</code>. Equivalent to <code>RawImage.read</code>.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/api/utils/image.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p>
<script>
{
__sveltekit_1t06csc = {
assets: "/docs/transformers.js/pr_1665/en",
base: "/docs/transformers.js/pr_1665/en",
env: {}
};
const element = document.currentScript.parentElement;
const data = [null,null];
Promise.all([
import("/docs/transformers.js/pr_1665/en/_app/immutable/entry/start.cb58eb6f.js"),
import("/docs/transformers.js/pr_1665/en/_app/immutable/entry/app.9eafcf9d.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 19],
data,
form: null,
error: null
});
});
}
</script>

Xet Storage Details

Size:
47.8 kB
·
Xet hash:
94cae75a74b6644d4d8736cbf0539dd9413c8af7db6c347f1abf7edd37dbde33

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.