2 lines
5.1 KiB
JavaScript
2 lines
5.1 KiB
JavaScript
import{J as x}from"./jszip.min-CRsa9W6H.js";import{_ as A,b as h,d,i as I,p as C,G as U,e as y,F as D,B as M,z as u,n as k}from"./index-DGJ6dnLh.js";const G={name:"ImageEditor",data(){return{images:[],currentIndex:null,channel:"rgba",mode:"view",drawing:!1,originalImageData:null}},computed:{currentImage(){return this.images[this.currentIndex]||null}},methods:{onFilesSelected(r){const e=Array.from(r.target.files);this.images=e.map(n=>({file:n,preview:URL.createObjectURL(n),name:n.name})),this.images.length&&this.loadImage(0)},loadImage(r){this.currentIndex=r;const e=new Image;e.onload=()=>{const n=this.$refs.canvas,s=n.getContext("2d");n.width=e.width,n.height=e.height,s.drawImage(e,0,0),this.originalImageData=s.getImageData(0,0,n.width,n.height),this.updateChannelView()},e.src=this.images[r].preview},setMode(r){this.mode=r},updateChannelView(){if(!this.originalImageData)return;const e=this.$refs.canvas.getContext("2d"),n=new ImageData(new Uint8ClampedArray(this.originalImageData.data),this.originalImageData.width,this.originalImageData.height);for(let s=0;s<n.data.length;s+=4){let[o,t,a,i]=n.data.slice(s,s+4);switch(this.channel){case"r":t=a=0;break;case"g":o=a=0;break;case"b":o=t=0;break;case"a":o=t=a=i;break}n.data[s]=o,n.data[s+1]=t,n.data[s+2]=a}e.putImageData(n,0,0)},onMouseDown(){this.mode==="draw"&&(this.drawing=!0)},onMouseUp(){this.drawing=!1},onMouseMove(r){if(!this.drawing||this.mode!=="draw")return;const e=this.$refs.canvas,n=e.getContext("2d"),s=e.getBoundingClientRect(),o=r.clientX-s.left,t=r.clientY-s.top;n.fillStyle="red",n.beginPath(),n.arc(o,t,4,0,Math.PI*2),n.fill()},downloadTGA(){var p,b;const r=this.$refs.canvas,n=r.getContext("2d").getImageData(0,0,r.width,r.height),{width:s,height:o,data:t}=n,a=new Uint8Array(18);a[2]=2,a[12]=s&255,a[13]=s>>8&255,a[14]=o&255,a[15]=o>>8&255,a[16]=24;const i=new Uint8Array(s*o*3);let l=0;for(let f=o-1;f>=0;f--)for(let w=0;w<s;w++){const v=(f*s+w)*4;i[l++]=t[v+2],i[l++]=t[v+1],i[l++]=t[v]}const c=new Uint8Array(a.length+i.length);c.set(a,0),c.set(i,a.length);const g=new Blob([c],{type:"application/octet-stream"}),m=document.createElement("a");m.href=URL.createObjectURL(g),m.download=((b=(p=this.currentImage)==null?void 0:p.name)==null?void 0:b.replace(/\.(jpg|jpeg|png)$/i,".tga"))||"output.tga",m.click(),URL.revokeObjectURL(m.href)},async downloadAllTGA(){const r=new x;for(let s=0;s<this.images.length;s++){const o=this.images[s],t=new Image;t.src=o.preview,await new Promise(a=>{t.onload=()=>{const i=document.createElement("canvas"),l=i.getContext("2d");i.width=t.width,i.height=t.height,l.drawImage(t,0,0);const c=l.getImageData(0,0,i.width,i.height),g=this.convertImageDataToTGA(c),m=o.name.replace(/\.(jpg|jpeg|png)$/i,".tga");r.file(m,g),a()}})}const e=await r.generateAsync({type:"blob"}),n=document.createElement("a");n.href=URL.createObjectURL(e),n.download="images_export.zip",n.click(),URL.revokeObjectURL(n.href)},convertImageDataToTGA(r){const{width:e,height:n,data:s}=r,o=new Uint8Array(18);o[2]=2,o[12]=e&255,o[13]=e>>8&255,o[14]=n&255,o[15]=n>>8&255,o[16]=24;const t=new Uint8Array(e*n*3);let a=0;for(let l=n-1;l>=0;l--)for(let c=0;c<e;c++){const g=(l*e+c)*4;t[a++]=s[g+2],t[a++]=s[g+1],t[a++]=s[g]}const i=new Uint8Array(o.length+t.length);return i.set(o,0),i.set(t,o.length),i}}},T={class:"image-editor"},R={class:"editor-header"},j={class:"editor-controls"},L=["disabled"],B=["disabled"],V={key:0,class:"thumbnail-list"},S=["onClick"],_=["src"],E={key:1,class:"editor-canvas"};function F(r,e,n,s,o,t){return u(),h("div",T,[d("div",R,[e[11]||(e[11]=d("h1",null,"图片转换工具(TGA)",-1)),d("div",j,[d("input",{type:"file",multiple:"",onChange:e[0]||(e[0]=(...a)=>t.onFilesSelected&&t.onFilesSelected(...a)),accept:".jpg,.jpeg,.png"},null,32),d("button",{onClick:e[1]||(e[1]=a=>t.setMode("draw"))},"涂鸦"),d("button",{onClick:e[2]||(e[2]=a=>t.setMode("view"))},"查看"),C(d("select",{"onUpdate:modelValue":e[3]||(e[3]=a=>o.channel=a),onChange:e[4]||(e[4]=(...a)=>t.updateChannelView&&t.updateChannelView(...a))},e[10]||(e[10]=[y('<option value="rgba" data-v-d6fab920>原图</option><option value="r" data-v-d6fab920>R 通道</option><option value="g" data-v-d6fab920>G 通道</option><option value="b" data-v-d6fab920>B 通道</option><option value="a" data-v-d6fab920>Alpha 通道</option>',5)]),544),[[U,o.channel]]),d("button",{onClick:e[5]||(e[5]=(...a)=>t.downloadTGA&&t.downloadTGA(...a)),disabled:!t.currentImage},"导出TGA",8,L),d("button",{onClick:e[6]||(e[6]=(...a)=>t.downloadAllTGA&&t.downloadAllTGA(...a)),disabled:o.images.length===0},"批量导出 ZIP",8,B)])]),o.images.length>0?(u(),h("div",V,[(u(!0),h(D,null,M(o.images,(a,i)=>(u(),h("div",{key:i,class:k(["thumbnail",{active:i===o.currentIndex}]),onClick:l=>t.loadImage(i)},[d("img",{src:a.preview,alt:"缩略图"},null,8,_)],10,S))),128))])):I("",!0),t.currentImage?(u(),h("div",E,[d("canvas",{ref:"canvas",onMousedown:e[7]||(e[7]=(...a)=>t.onMouseDown&&t.onMouseDown(...a)),onMouseup:e[8]||(e[8]=(...a)=>t.onMouseUp&&t.onMouseUp(...a)),onMousemove:e[9]||(e[9]=(...a)=>t.onMouseMove&&t.onMouseMove(...a))},null,544)])):I("",!0)])}const z=A(G,[["render",F],["__scopeId","data-v-d6fab920"]]);export{z as default};
|