-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
32 lines (32 loc) · 8.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html><html lang=en><meta charset=utf-8>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
document.getElementsByClassName('usage')[0].innerHTML+="<strong>Save them in your web browser's bookmarks.</strong> Then run the bookmarklet on a <i>picrew.me/image_maker</i> or <i>picrew.me/secret_image_maker</i>.";
})
</script>
<title>Picrew downloader bookmarklet</title>
<main>
<h1>Picrew downloader bookmarklet</h1>
<p class=usage>These are JavaScript bookmarklets. <noscript><strong>Your browser is not using JavaScript!</strong></noscript></p>
<a href="javascript:void(location.hostname!='picrew.me'||!(location.pathname.includes('/image_maker/')||location.pathname.includes('/secret_image_maker/'))?alert('Not a Picrew image maker!'):(async()=>{let L=[],D=[],M=0,E=0,F=0;const g=(a,i,v)=>a.setInt16(i,v,1)|v,H=(a,i,v)=>a.setInt32(i,v,1)|v,b=document.createElement('progress'),C=(()=>{for(var a,o=[],c=0;c<256;c++){a=c;for(let f=0;f<8;f++)a=1&a?3988292384^a>>>1:a>>>1;o[c]=a}return o})(),c=b=>{for(var r=new Int8Array(b),n=-1,t=0;t<r.length;t++)n=n>>>8^C[255&(n^r[t])];return~n},N=__NUXT__.state,U=s=>new TextEncoder().encode(s),a=(p,d)=>{const q=new DataView(new ArrayBuffer(26)),r=U(p),s=new DataView(new ArrayBuffer(14));q.setInt8(0,10);H(q,10,c(d));H(q,14,H(q,18,d.byteLength));g(q,22,r.length);L.push('PK\x03\x04',q,r,d);H(s,10,M);D.push('PK\x01\x02\x14\0',q,s,r);M+=30+r.length+d.byteLength;E+=46+r.length;F++};b.style.position='absolute';b.style.top=0;b.style.width='100%';document.body.appendChild(b);a('mimetype',U('image/openraster'));a('comment.txt',U(N.imageMakerInfo.description));const R=document.querySelector('canvas'),S=256/Math.max(N.config.w,N.config.h),T=document.createElement('canvas'),V=N.config.h*S|0,W=N.config.w*S|0,X=document.implementation.createDocument(null,'image'),Y=X.documentElement,Z=X.createElement('stack'),l=await new Promise(q=>indexedDB.open('picrew').onsuccess=r=>r.target.result.transaction('image_maker_parts').objectStore('image_maker_parts').getAll(IDBKeyRange.bound([N.imageMakerId],[N.imageMakerId,''])).onsuccess=s=>q(s.target.result)),A=new DataView(new ArrayBuffer(18));await fetch(R.toDataURL()).then(r=>r.arrayBuffer()).then(x=>a('mergedimage.png',x));T.width=W;T.height=V;T.getContext('2d').drawImage(R,0,0,W,V);await fetch(T.toDataURL()).then(r=>r.arrayBuffer()).then(x=>a('Thumbnails/thumbnail.png',x));Y.setAttribute('w',N.config.w);Y.setAttribute('h',N.config.h);Y.setAttribute('version','0.0.6');Y.appendChild(Z);b.max=l.filter(x=>x.parts_data.itmId).length;b.value=0;for(const d of Object.entries(N.config.lyrList).sort((a,b)=>b[1]-a[1])){const e=N.config.pList.find(p=>p.lyrs.includes(+d[0]));if(!e)continue;const m=l.find(x=>x.parts_id==e.pId).parts_data;if(N.commonImages[m.itmId]&&N.commonImages[m.itmId][d[0]]&&N.commonImages[m.itmId][d[0]][m.cId]){const o=X.createElement('layer'),P=N.commonImages[m.itmId][d[0]][m.cId].url,p='data/'+P.split('/').pop();o.setAttribute('src',p);o.setAttribute('name',e.pNm);o.setAttribute('x',m.xCnt+e.x);o.setAttribute('y',m.yCnt+e.y);Z.appendChild(o);await fetch(N.picrewData.cdnRoot+P).then(r=>r.arrayBuffer()).then(x=>a(p,x));b.value++}}a('stack.xml',U(new XMLSerializer().serializeToString(X)));g(A,4,g(A,6,F));H(A,8,E);H(A,12,M);const B=URL.createObjectURL(new Blob(L.concat(D,'PK\x05\x06',A),{type:'application/zip'})),h=document.createElement('a');h.href=B;h.download=N.imageMakerId+'.ora';h.click();URL.revokeObjectURL(B);document.body.removeChild(b)})().catch(alert))//1.6.2">Download current Picrew state bookmarklet</a><br>
<a href="javascript:void(location.hostname!='picrew.me'||!(location.pathname.includes('/image_maker/')||location.pathname.includes('/secret_image_maker/'))?alert('Not a Picrew image maker!'):(async()=>{let L=[],D=[],M=0,E=0,F=0;const g=(a,i,v)=>a.setInt16(i,v,1)|v,H=(a,i,v)=>a.setInt32(i,v,1)|v,b=document.createElement('progress'),C=(()=>{for(var a,o=[],c=0;c<256;c++){a=c;for(let f=0;f<8;f++)a=1&a?3988292384^a>>>1:a>>>1;o[c]=a}return o})(),c=b=>{for(var r=new Int8Array(b),n=-1,t=0;t<r.length;t++)n=n>>>8^C[255&(n^r[t])];return~n},N=__NUXT__.state,U=s=>new TextEncoder().encode(s),a=(p,d)=>{const q=new DataView(new ArrayBuffer(26)),r=U(p),s=new DataView(new ArrayBuffer(14));q.setInt8(0,10);H(q,10,c(d));H(q,14,H(q,18,d.byteLength));g(q,22,r.length);L.push('PK\x03\x04',q,r,d);H(s,10,M);D.push('PK\x01\x02\x14\0',q,s,r);M+=30+r.length+d.byteLength;E+=46+r.length;F++};b.style.position='absolute';b.style.top=0;b.style.width='100%';document.body.appendChild(b);a('mimetype',U('image/openraster'));a('comment.txt',U(N.imageMakerInfo.description));const R=document.querySelector('canvas'),S=256/Math.max(N.config.w,N.config.h),T=document.createElement('canvas'),V=N.config.h*S|0,W=N.config.w*S|0,X=document.implementation.createDocument(null,'image'),Y=X.documentElement,Z=X.createElement('stack'),l=await new Promise(q=>indexedDB.open('picrew').onsuccess=r=>r.target.result.transaction('image_maker_parts').objectStore('image_maker_parts').getAll(IDBKeyRange.bound([N.imageMakerId],[N.imageMakerId,''])).onsuccess=s=>q(s.target.result)),A=new DataView(new ArrayBuffer(18));await fetch(R.toDataURL()).then(r=>r.arrayBuffer()).then(x=>a('mergedimage.png',x));T.width=W;T.height=V;T.getContext('2d').drawImage(R,0,0,W,V);await fetch(T.toDataURL()).then(r=>r.arrayBuffer()).then(x=>a('Thumbnails/thumbnail.png',x));Y.setAttribute('w',N.config.w);Y.setAttribute('h',N.config.h);Y.setAttribute('version','0.0.6');Y.appendChild(Z);b.max=0;for(const n of Object.values(N.commonImages))for(const d of Object.values(n))b.max+=Object.keys(d).length;b.value=0;for(const d of Object.entries(N.config.lyrList).sort((a,b)=>b[1]-a[1])){const e=N.config.pList.find(p=>p.lyrs.includes(+d[0])),p=X.createElement('stack');if(!e)continue;Z.appendChild(p);p.setAttribute('name',e.pNm);for(const n of e.items)for(const O of N.config.cpList[e.cpId])if(N.commonImages[n.itmId]&&N.commonImages[n.itmId][d[0]]&&N.commonImages[n.itmId][d[0]][O.cId]){const o=X.createElement('layer'),P=N.commonImages[n.itmId][d[0]][O.cId].url,G='data/'+d[1]+'/'+n.itmId+O.cd+P.split('/').pop(),m=l.find(x=>x.parts_id==e.pId).parts_data;p.appendChild(o);o.setAttribute('src',G);if(m.itmId==n.itmId&&m.cId==O.cId){o.setAttribute('x',e.x+m.xCnt);o.setAttribute('y',e.y+m.yCnt)}else {o.setAttribute('visibility','hidden');o.setAttribute('x',e.x);o.setAttribute('y',e.y)}await fetch(N.picrewData.cdnRoot+P).then(r=>r.arrayBuffer()).then(x=>a(G,x));b.value++}}a('stack.xml',U(new XMLSerializer().serializeToString(X)));g(A,4,g(A,6,F));H(A,8,E);H(A,12,M);const B=URL.createObjectURL(new Blob(L.concat(D,'PK\x05\x06',A),{type:'application/zip'})),h=document.createElement('a');h.href=B;h.download=N.imageMakerId+'.ora';h.click();URL.revokeObjectURL(B);document.body.removeChild(b)})().catch(alert))//1.6.2">Download entire Picrew maker bookmarklet</a>
<h2>What?</h2>
<p><a href=https://picrew.me><ruby>Picrew<rp> (<rt lang=ja>ピクルー<rp>)</ruby></a> is a popular platform for image makers: multi-layer images designed to be customizable.<br>
These bookmarklets save Picrew image makers in the <a href=https://openraster.org>OpenRaster</a> format, a cross-application layered image format. OpenRaster files can also be opened as ZIP archives.<br>
The generated OpenRaster files deviate from the specification thusly: They contain a <code>comment.txt</code>. I set <code>comment.txt</code> to the image makers' provided descriptions.
<h2>Didn't you already make this?</h2>
<p>Previously, I had created the Picrew downloader browser extension. The bookmarklet has such improvements as:
<ul>
<li>Displaying a nifty progress bar
<li>Being an order of magnitude smaller (most of the original's size came from JSZip, of which I was not using most features)
<li>Not needing me to go through manifest-upgrading or polyglotting or extension-store shenanigans
</ul>
<h2>How can I report a problem?</h2>
<p>You can <a href=https://mincerafter42.github.io/contact>contact me</a> or report it at <a href=https://github.com/mincerafter42/picrew-download-bookmarklet/>the source code on GitHub.</a>
<p>It is known the maximum file size my code can correctly generate is around 4 gibibytes, due to the structure of the ZIP format. I deem this to not be a problem, as every tested image maker was significantly smaller.
<h2>How can I tell if I have the latest version?</h2>
<p>Check the version number at the end of the bookmarklet (after the <code>//</code>) and compare it to the version number of the same bookmarklet here.
<h2>What's the license?</h2>
<p>uhh "you can do whatever you want with this code" ok bye</p>
</main>
<footer><a href=https://mincerafter42.github.io>Return to Viatrix's home page</a></footer>