65 lines
4.7 KiB
JavaScript
65 lines
4.7 KiB
JavaScript
function clamp(value,min,max){return Math.min(max,Math.max(min,value));}
|
||
function stem(name){return name.replace(/\.[^.]+$/,"")||"image";}
|
||
|
||
export async function prepareImageFile(file){
|
||
if(!file.type.startsWith("image/"))return file;
|
||
const url=URL.createObjectURL(file);
|
||
const image=new Image();
|
||
image.src=url;
|
||
await image.decode();
|
||
|
||
const dialog=document.createElement("dialog");
|
||
dialog.className="image-editor-dialog";
|
||
dialog.innerHTML=`<form method="dialog" class="image-editor-panel">
|
||
<div class="image-editor-head"><div><h2>Adjust image</h2><p>Drag to crop, use zoom and choose output size.</p></div><button class="icon-button" value="cancel" aria-label="Close">×</button></div>
|
||
<div class="image-crop-stage"><canvas></canvas></div>
|
||
<div class="image-editor-controls">
|
||
<label>Crop<select data-aspect><option value="free">Free</option><option value="1">Square</option><option value="1.333333">4:3</option><option value="1.777778">16:9</option></select></label>
|
||
<label>Zoom<input data-zoom type="range" min="1" max="3" value="1" step="0.01"></label>
|
||
<label>Max size<select data-size><option value="1200">1200 px</option><option value="1600" selected>1600 px</option><option value="2000">2000 px</option><option value="0">Original</option></select></label>
|
||
</div>
|
||
<div class="image-editor-actions"><button class="secondary-button" value="cancel">Cancel</button><button type="button" class="primary-button" data-apply>Use image</button></div>
|
||
</form>`;
|
||
document.body.append(dialog);
|
||
const canvas=dialog.querySelector("canvas"),ctx=canvas.getContext("2d"),stage=dialog.querySelector(".image-crop-stage"),zoomInput=dialog.querySelector("[data-zoom]"),aspectSelect=dialog.querySelector("[data-aspect]"),sizeSelect=dialog.querySelector("[data-size]");
|
||
let offsetX=0,offsetY=0,dragging=false,lastX=0,lastY=0,accepted=false;
|
||
|
||
function cropBox(){
|
||
const rect=stage.getBoundingClientRect();
|
||
let width=Math.max(280,rect.width),height=Math.min(520,Math.max(260,rect.height));
|
||
const aspect=aspectSelect.value==="free"?width/height:Number(aspectSelect.value);
|
||
if(width/height>aspect)width=height*aspect;else height=width/aspect;
|
||
return {width:Math.round(width),height:Math.round(height)};
|
||
}
|
||
function draw(){
|
||
const box=cropBox(),dpr=Math.min(devicePixelRatio||1,2);
|
||
canvas.width=Math.round(box.width*dpr);canvas.height=Math.round(box.height*dpr);canvas.style.width=`${box.width}px`;canvas.style.height=`${box.height}px`;
|
||
ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,box.width,box.height);
|
||
const base=Math.max(box.width/image.naturalWidth,box.height/image.naturalHeight),scale=base*Number(zoomInput.value);
|
||
const drawW=image.naturalWidth*scale,drawH=image.naturalHeight*scale;
|
||
const maxX=Math.max(0,(drawW-box.width)/2),maxY=Math.max(0,(drawH-box.height)/2);
|
||
offsetX=clamp(offsetX,-maxX,maxX);offsetY=clamp(offsetY,-maxY,maxY);
|
||
ctx.drawImage(image,(box.width-drawW)/2+offsetX,(box.height-drawH)/2+offsetY,drawW,drawH);
|
||
}
|
||
function point(event){const p=event.touches?.[0]||event;return {x:p.clientX,y:p.clientY};}
|
||
canvas.addEventListener("pointerdown",event=>{dragging=true;canvas.setPointerCapture(event.pointerId);({x:lastX,y:lastY}=point(event));});
|
||
canvas.addEventListener("pointermove",event=>{if(!dragging)return;const p=point(event);offsetX+=p.x-lastX;offsetY+=p.y-lastY;lastX=p.x;lastY=p.y;draw();});
|
||
canvas.addEventListener("pointerup",()=>dragging=false);canvas.addEventListener("pointercancel",()=>dragging=false);
|
||
zoomInput.addEventListener("input",draw);aspectSelect.addEventListener("change",()=>{offsetX=0;offsetY=0;draw();});window.addEventListener("resize",draw,{signal:(()=>{const c=new AbortController();dialog.addEventListener("close",()=>c.abort(),{once:true});return c.signal;})()});
|
||
|
||
const result=new Promise(resolve=>{
|
||
dialog.addEventListener("close",()=>{URL.revokeObjectURL(url);dialog.remove();resolve(accepted);},{once:true});
|
||
dialog.querySelector("[data-apply]").addEventListener("click",async()=>{
|
||
const box=cropBox(),maxSize=Number(sizeSelect.value),ratio=Math.min(1,maxSize?maxSize/Math.max(box.width,box.height):1),out=document.createElement("canvas");
|
||
out.width=Math.max(1,Math.round(box.width*ratio));out.height=Math.max(1,Math.round(box.height*ratio));out.getContext("2d").drawImage(canvas,0,0,out.width,out.height);
|
||
const mime=file.type==="image/png"?"image/png":"image/jpeg";
|
||
const blob=await new Promise(r=>out.toBlob(r,mime,mime==="image/jpeg"?.88:undefined));
|
||
const ext=mime==="image/png"?"png":"jpg";
|
||
accepted=new File([blob],`${stem(file.name)}-edited.${ext}`,{type:mime,lastModified:Date.now()});
|
||
dialog.close();
|
||
});
|
||
});
|
||
dialog.showModal();requestAnimationFrame(draw);
|
||
return result;
|
||
}
|