※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

本ページはjavascript版手書き機能のためのブックマークレットのまとめです。
使い方については「ブックマークレット 使い方」などで検索して下さい。

  • 手書き枠サイズ変更その他
javascript:(function(){var D=document,SA='setAttribute',CE='createElement',CT='createTextNode',I='appendChild',s='style',w='width',h='height',Z=[135,200,270,344,400],zx,zy,S=g('oejs'),ct=S.getContext('2d');function b(v,q){var e=D[CE]('input'),Q='addEventListener';e[SA]('type','button');e[SA]('value',v);e[Q]?e[Q]('click',q,!1):e.onclick=q;return e}function g(n){return D.getElementById(n)}function ig(){var P=ct.getImageData(0,0,S[w],S[h]);return P}function ip(P,x,y){ct.fillStyle='#F0E0D6';ct.fillRect(0,0,S[w],S[h]);ct.putImageData(P,x,y);}function wS(x,y){var X=g('ftxa')[s],T=g('oe3')[s],St=g('oest1')[s],ox=S[w],oy=S[h],zm=1,P=ig();if(S[s].transform.match(/scale\(([0-9]+)\)/))zm=Number(RegExp.$1);X[w]=T[w]=(x*zm+46)+'px';St[w]=x*zm+'px';X[h]=T[h]=y*zm+'px';S[w]=x;S[h]=y;ip(P,(x-ox)/2,(y-oy)/2);}function scr(x,y){var P=ig();ip(P,x,y);}for(zx=0;zx<4;zx++){if(S[w]<=Z[zx])break;}for(zy=0;zy<4;zy++){if(S[h]<=Z[zy])break;}var TOP=D.getElementsByTagName('body')[0],PAL=D.getElementsByClassName('pal'),M=D[CE]('div'),N=D[CE]('div');M[SA]('style','position:relative;height:50px;');M[SA]('class','pal edit');N[SA]('style','position:fixed;background-color:#888888;z-index:999;');if(PAL.length){PAL[PAL.length-1].parentNode.insertBefore(M,PAL[PAL.length-1].nextSibling);}else{TOP.insertBefore(M,TOP.firstChild);}M[I](N);N[I](b('縦+',function(){zy=zy+(zy<4?1:0);wS(Z[zx],Z[zy]);}));N[I](b('縦-',function(){zy=zy-(zy>0?1:0);wS(Z[zx],Z[zy]);}));N[I](b('横+',function(){zx=zx+(zx<4?1:0);wS(Z[zx],Z[zy]);}));N[I](b('横-',function(){zx=zx-(zx>0?1:0);wS(Z[zx],Z[zy]);}));N[I](D[CT]('\u00a0'));N[I](b('上',function(){scr(0,-1);}));N[I](b('下',function(){scr(0,1);}));N[I](b('左',function(){scr(-1,0);}));N[I](b('右',function(){scr(1,0);}));N[I](D[CT]('\u00a0'));N[I](b('上下反転',function(){var P=ig();for(i=0,j=S[h]-1;i<S[h];i++,j--){ct.putImageData(P,0,i-j,0,j,S[w],1);}}));N[I](b('左右反転',function(){var P=ig();for(i=0,j=S[w]-1;i<S[w];i++,j--){ct.putImageData(P,i-j,0,j,0,1,S[h]);}}));N[I](D[CE]('div'));N[I](b('CLOSE',function(){M.parentNode.removeChild(M);}));})();

  • 手書き補助関係の色々
javascript:(function(){var D=document,SA='setAttribute',CE='createElement',CT='createTextNode',EvA='addEventListener',EvR='removeEventListener',I='appendChild',s='style',w='width',h='height',S=g('oejs'),ct=S.getContext('2d'),Z=1,flag=1;var undomax=10,undop=0,undo=[];for(var i=0;i<=undomax;i++){undo.unshift("");}function b(v,f,q){var e=D[CE]('input');if(f=='c'){e[SA]('type','checkbox');}else{e[SA]('type','button');}e[SA]('value',v);e[EvA]?e[EvA]('click',q,!1):e.onclick=q;return e}function g(n){return D.getElementById(n)}function wZ(z){var X=g('ftxa')[s],T=g('oe3')[s],St=g('oest1')[s];Z=Z+z;if(Z<1)Z=1;if(Z>8)Z=8;X[w]=T[w]=(S[w]*Z+46)+'px';St[w]=S[w]*Z+'px';X[h]=T[h]=S[h]*Z+'px';if(Z==1){S[s]='';ct.setTransform(1,0,0,1,0,0);}else{S[s].transformOrigin='0 0';S[s].transform='scale('+Z+')';ct.setTransform(1/Z,0,0,1/Z,0,0);}}function spuit(e){var rect=e.target.getBoundingClientRect(),x=e.clientX-rect.left,y=e.clientY-rect.top,P=ct.getImageData(x/Z,y/Z,1,1),c='rgb('+P.data[0]+','+P.data[1]+','+P.data[2]+')';g('oecolor').value=c;g("oepb").style.backgroundColor=c;}function MD(e){if(e.button==0){flag=1;}else if(e.button==1){spuit(e);}}function MU(){if(flag){undop++;if(undop>undomax){undop=0;}undo[undop]=ct.getImageData(0,0,S[w],S[h]);flag=0;}}function undoF(){undop--;if(undop<0){undop=undomax;}if(undo[undop]==""){undop++;if(undop>undomax){undop=0;}return;}ct.putImageData(undo[undop],0,0);}function redoF(){if(undo[undop+1]!=""){undop++;if(undop>undomax){undop=0;}if(undo[undop]==""){undop--;if(undop<0){undop=undomax;}return;}ct.putImageData(undo[undop],0,0);}}function KD(e){if(e.keyCode==90&&e.altKey){if(e.shiftKey){redoF();}else{undoF();}}}MU();S[EvA]('mousedown',MD,false);D[EvA]('mouseup',MU,false);D[EvA]('keydown',KD,false);if(S[s].transform.match(/scale\(([0-9]+)\)/))Z=Number(RegExp.$1);var TOP=D.getElementsByTagName('body')[0],PAL=D.getElementsByClassName('pal'),M=D[CE]('div'),N=D[CE]('div');M[SA]('style','position:relative;height:50px;');M[SA]('class','pal work');N[SA]('style','position:fixed;background-color:#888888;z-index:999;');if(PAL.length){PAL[PAL.length-1].parentNode.insertBefore(M,PAL[PAL.length-1].nextSibling);}else{TOP.insertBefore(M,TOP.firstChild);}M[I](N);N[I](b('拡','b',function(){wZ(1);}));N[I](b('縮','b',function(){wZ(-1);}));N[I](D[CT]('\u00a0'));N[I](b('U','b',function(){undoF();}));N[I](b('R','b',function(){redoF();}));N[I](D[CT]('\u00a0'));N[I](b('●','b',function(){g('oecolor').value='#800000';g("oepb").style.backgroundColor='#800000';}));N[I](b('○','b',function(){g('oecolor').value='#F0E0D6';g("oepb").style.backgroundColor='#F0E0D6';}));N[I](D[CT]('\u00a0'));N[I](b('1','b',function(){g('slider1o').value=55-Z*2;}));N[I](b('2','b',function(){g('slider1o').value=55-Z*4;}));N[I](b('3','b',function(){g('slider1o').value=55-Z*6;}));N[I](D[CT]('\u00a0'));N[I](b('透','c',function(){if(this.checked)ct.globalAlpha=0.1;else ct.globalAlpha=1;}));N[I](D[CT]('\u00a0'));N[I](b('全塗','b',function(){flag=1;MU();ct.fillStyle=g('oecolor').value;ct.fillRect(0,0,S[w]*Z,S[h]*Z);}));N[I](D[CE]('div'));N[I](b('CLOSE','b',function(){for(var i=0;i<undomax;i++)undo[i]=void 0;S[EvR]('mousedown',MD,false);D[EvR]('mouseup',MU,false);D[EvR]('keydown',KD,false);ct.globalAlpha=1;M.parentNode.removeChild(M);}));})();

  • 手書き欄を文字列で埋め尽くし
文字色を変更するには#??????、文字列を変更するには咲さんかわいい!の部分を変更
javascript:(function(){var C=document.getElementById('oejs');if(C.getContext){var E=C.getContext('2d');E.fillStyle='#800000';for(y=0;y<15;y++){for(x=0;x<5;x++){E.fillText('咲さんかわいい!',x*80-y%2*40,y*10);}}}})();

  • 手書き欄をコピーペースト
javascript:(function(){var D=document,G=g('ftbl'),A='setAttribute',C='createElement',Q='addEventListener',N=G.parentNode,I='insertBefore',w='width',h='height',S=g('oejs'),ct=S.getContext('2d'),Cp1,Cp2,Cp3,Cp4,Cp5;function g(n){return D.getElementById(n)}function b(v,q){var e=D[C]('input');e[A]('type','button');e[A]('value',v);e[Q]?e[Q]('click',q,!1):e.onclick=q;return e}function ig(){var P=ct.getImageData(0,0,S[w],S[h]);return P}function ip(P){ct.putImageData(P,0,0);}N[I](D[C]('div'),G);N[I](b('COPY_1',function(){Cp1=ig();}),G);N[I](b('COPY_2',function(){Cp2=ig();}),G);N[I](b('COPY_3',function(){Cp3=ig();}),G);N[I](b('COPY_4',function(){Cp4=ig();}),G);N[I](b('COPY_5',function(){Cp5=ig();}),G);N[I](D[C]('div'),G);N[I](b('PASTE1',function(){ip(Cp1);}),G);N[I](b('PASTE2',function(){ip(Cp2);}),G);N[I](b('PASTE3',function(){ip(Cp3);}),G);N[I](b('PASTE4',function(){ip(Cp4);}),G);N[I](b('PASTE5',function(){ip(Cp5);}),G);})();

  • コメント欄を利用して手書き欄に画像貼り付け
コメント欄に画像のURLを入力してから使います、貼り付けられるのはスレ内の画像のみ
javascript:(function(){var canvas=document.getElementById('oejs');if(canvas.getContext){var context=canvas.getContext('2d');var img=new Image();img.src=document.getElementById('ftxa').value;context.drawImage(img,0,0);}})();

  • 添付ファイル欄を利用して手書き欄に画像貼り付け
書き込み欄で画像添付してから使います
javascript:(function(){var canvas=document.getElementById('oejs');var file=document.getElementById('preview_canvas');if(canvas.getContext && file.getContext){var cctx=canvas.getContext('2d'),fctx=file.getContext('2d'),image=fctx.getImageData(0,0,file.width,file.height);cctx.putImageData(image,0,0);}})();

  • コメント欄に入力されたテキストを手書き欄に入力
javascript:(function(){var canvas=document.getElementById('oejs');if(canvas.getContext){var strs=document.getElementById('ftxa').value.split('\n');var context=canvas.getContext('2d');context.fillStyle='#000000';for(i=0;i<strs.length;i++){context.fillText(strs[i],10,12*i+20);}}})();

  • レイヤー機能
javascript:(function(){var D=document,SA='setAttribute',CE='createElement',CT='createTextNode',EvA='addEventListener',I='appendChild',s='style',w='width',h='height',S=g('oejs'),ct=S.getContext('2d');function b(v,f,q){var e=D[CE]('input');if(f=='c'){e[SA]('type','checkbox');}else{e[SA]('type','button');}e[SA]('value',v);e[EvA]?e[EvA]('click',q,!1):e.onclick=q;return e}function g(n){return D.getElementById(n)}var TOP=D.getElementsByTagName('body')[0],PAL=D.getElementsByClassName('pal'),M=D[CE]('div'),N=D[CE]('div');M[SA]('style','position:relative;height:50px;');M[SA]('class','pal layer');N[SA]('style','position:fixed;background-color:#888888;z-index:999;');if(PAL.length){PAL[PAL.length-1].parentNode.insertBefore(M,PAL[PAL.length-1].nextSibling);}else{TOP.insertBefore(M,TOP.firstChild);}M[I](N);var LaCv=D[CE]('canvas'),LaCt=LaCv.getContext('2d'),St=g('oest1');St[I](LaCv);LaCv[SA]('class','layer');LaCv[w]=S[w];LaCv[h]=S[h];function La_init(){LaCv[s].transformOrigin=S[s].transformOrigin;LaCv[s].transform=S[s].transform;S[s]['position']='absolute';LaCv[s]['position']='relative';}La_init();LaCv[s]['pointer-events']='none';LaCv[s]['opacity']='0.1';N[I](b('更新','b',function(){La_init();}));N[I](b('退避','b',function(){var P=ct.getImageData(0,0,S[w],S[h]);LaCt.putImageData(P,0,0);}));N[I](b('合成','b',function(){var zm=1;if(S[s].transform.match(/scale\(([0-9]+)\)/))zm=Number(RegExp.$1);ct.drawImage(LaCv,0,0,LaCv[w]*zm,LaCv[h]*zm);}));N[I](b('入替','b',function(){var PB=ct.getImageData(0,0,S[w],S[h]),PR=LaCt.getImageData(0,0,S[w],S[h]);ct.putImageData(PR,0,0);LaCt.putImageData(PB,0,0);}));N[I](b('消去','b',function(){var zm=1;if(S[s].transform.match(/scale\(([0-9]+)\)/))zm=Number(RegExp.$1);LaCt.clearRect(0,0,S[w]*zm,S[h]*zm);}));N[I](D[CT]('\u00a0'));N[I](b('透過表示','b',function(){LaCv[s]['opacity']='0.1';}));N[I](b('非表示','b',function(){LaCv[s]['opacity']='0.0';}));N[I](b('全表示','b',function(){LaCv[s]['opacity']='1.0';}));N[I](D[CT]('\u00a0'));N[I](b('透','c',function(){if(this.checked)ct.globalCompositeOperation='destination-out';else ct.globalCompositeOperation='source-over';}));N[I](D[CE]('div'));N[I](b('CLOSE','b',function(){ct.globalCompositeOperation='source-over';S[s]['position']='';M.parentNode.removeChild(M);LaCv.parentNode.removeChild(LaCv);}));})();

  • 範囲選択編集
javascript:(function(){var D=document,SA='setAttribute',CE='createElement',CT='createTextNode',EvA='addEventListener',I='appendChild',w='width',h='height',TOP=D.getElementsByTagName('body')[0],PAL=D.getElementsByClassName('pal'),M=D[CE]('div'),N=D[CE]('div'),S=g('oejs'),ct=S.getContext('2d'),Cp1,Cp2,Cp3,Cp4,Cp5;M[SA]('style','position: relative; height: 100px;');M[SA]('class','pal select');N[SA]('style','position: fixed; background-color: #888888; z-index: 999;');if(PAL.length){PAL[PAL.length-1].parentNode.insertBefore(M,PAL[PAL.length-1].nextSibling);}else{TOP.insertBefore(M,TOP.firstChild);}M[I](N);function b(v,f,q){var e=D[CE]('input');if(f=='c'){e[SA]('type','checkbox');}else{e[SA]('type','button');}e[SA]('value',v);e[EvA]?e[EvA]('click',q,!1):e.onclick=q;return e}function t(i,min){var e=D[CE]('input');e[SA]('type','number');e[SA]('id',i);e[SA]('value',min);e[SA]('style','width:40px');e[SA]('min',min);return e;}function g(n){return D.getElementById(n)}function ig(){var P=ct.getImageData(bv('cX0'),bv('cY0'),bv('cX1'),bv('cY1'));return P}function ip(P,x,y){ct.putImageData(P,bv('cX0')+x,bv('cY0')+y);}function scr(x, y){var P=ig(),x0=g('cX0'),y0=g('cY0');ct.fillStyle="#F0E0D6";ct.fillRect(bv('cX0'),bv('cY0'),bv('cX1'),bv('cY1'));ip(P, x, y);x0.value=bv('cX0')+x;y0.value=bv('cY0')+y;}function bv(n){return Number(g(n).value)}N[I](D[CT]('始点x:'));N[I](t('cX0',0));N[I](D[CT]('始点y:'));N[I](t('cY0',0));N[I](D[CT]('幅x:'));N[I](t('cX1',1));N[I](D[CT]('幅y:'));N[I](t('cY1',1));N[I](D[CE]('div'));N[I](b('上','b',function(){scr(0,-1);}));N[I](b('下','b',function(){scr(0,1);}));N[I](b('左','b',function(){scr(-1,0);}));N[I](b('右','b',function(){scr(1,0);}));N[I](D[CT]('\u00a0'));N[I](b('上下反転','b',function(){var cpy1,cpy2;for(i=0;i<bv('cY1')/2;i++){cpy1 = ct.getImageData(bv('cX0'),bv('cY0')+i,bv('cX1'),1);cpy2 = ct.getImageData(bv('cX0'),bv('cY0')+bv('cY1')-1-i,bv('cX1'),1);ct.putImageData(cpy1,bv('cX0'),bv('cY0')+bv('cY1')-1-i);ct.putImageData(cpy2,bv('cX0'),bv('cY0')+i);}}));N[I](b('左右反転','b',function(){var cpy1,cpy2;for(i=0;i<bv('cX1')/2;i++){cpy1=ct.getImageData(bv('cX0')+i,bv('cY0'),1,bv('cY1'));cpy2=ct.getImageData(bv('cX0')+bv('cX1')-1-i,bv('cY0'),1,bv('cY1'));ct.putImageData(cpy1,bv('cX0')+bv('cX1')-1-i,bv('cY0'));ct.putImageData(cpy2,bv('cX0')+i,bv('cY0'));}}));N[I](D[CT]('\u00a0'));N[I](b('CLOSE','b',function(){M.parentNode.removeChild(M);}));N[I](D[CE]('div'));N[I](b('COPY_1','b',function(){Cp1=ig();}));N[I](b('COPY_2','b',function(){Cp2=ig();}));N[I](b('COPY_3','b',function(){Cp3=ig();}));N[I](b('COPY_4','b',function(){Cp4=ig();}));N[I](b('COPY_5','b',function(){Cp5=ig();}));N[I](D[CE]('div'));N[I](b('PASTE1','b',function(){ip(Cp1,0,0);}));N[I](b('PASTE2','b',function(){ip(Cp2,0,0);}));N[I](b('PASTE3','b',function(){ip(Cp3,0,0);}));N[I](b('PASTE4','b',function(){ip(Cp4,0,0);}));N[I](b('PASTE5','b',function(){ip(Cp5,0,0);}));})();