image-wire/dist/image-wire.es.js

0 dependencies, less than 1kb library to glue images together

const t={gap:0,direction:"horizontal",type:"image/png",quality:.92};async function e(e,a){const{direction:i,gap:o,color:n,type:h,quality:r}={...t,...a},c=e instanceof FileList?Array.from(e).map(URL.createObjectURL):e,l=document.createElement("canvas"),g=l.getContext("2d"),d=c.map((t=>new Promise(((e,a)=>{const i=new Image;i.onerror=()=>a(new Error("Couldn't load image")),i.onload=()=>e(i),i.src=t})))),m=await Promise.all(d),s=(t,e)=>m.slice(0,e).reduce(((e,a,i)=>e+a[t]+(i?o:0)),0),w=t=>Math.max(...m.map((e=>e[t])));"horizontal"===i?(l.width=s("width",m.length),l.height=w("height")):(l.width=w("width"),l.height=s("height",m.length)),n&&(g.fillStyle=n,g.fillRect(0,0,l.width,l.height));return m.forEach(((t,e)=>{const a=(t=>t?"horizontal"===i?[s("width",t)+o,0]:[0,s("height",t)+o]:[0,0])(e);g.drawImage(t,...a)})),fetch(l.toDataURL(h,r)).then((t=>t.blob())).then((t=>[URL.createObjectURL(t),t]))}export{e as imageWire};