JSで画像に落書きする
画像が一つ飛ばしになるの修正
canvas要素で遊ぼうってことで、画像に落書きできるスクリプト書いてみました。
使い方
windowのロードイベント後に以下のコード読み込んで下さい。
firebug入っているなら、コンソールに貼り付けて、実行でおk。
pixiv辺りが画像多くて狙い目。
ペイントの鉛筆と同じ要領で絵が描けます。
右クリックから画像の保存も可能。
firefox3で動作確認してます。
Canvas = function(img) { if(!img) return; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var flag = false; canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0); if(img.parentNode.tagName == 'A') { parent = img.parentNode.parentNode; child = img.parentNode; } else { parent = img.parentNode; child = img; } parent.replaceChild(canvas, child); function pos(event) { var valueT = 0, valueL = 0, element = canvas; do { valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; if (element.offsetParent == document.body) if (element.style.position == 'absolute') break; element = element.offsetParent; } while (element); return [event.pageX - valueL, event.pageY - valueT]; } function start(event) { var l = pos(event); context.moveTo(l[0], l[1]); flag = true; } function draw(event) { if(!flag) return; var l = pos(event); context.lineTo(l[0], l[1]); context.stroke(); } function end(event) { flag = false; } canvas.addEventListener('mousedown', start, false); canvas.addEventListener('mousemove', draw, false); canvas.addEventListener('mouseup', end, false); }; for(var i = 0, l = document.images.length; i < l; i++) new Canvas(document.images[0]);
bookmarklet
ブックマークレット版です。
やってることは上と同じです。
javascript:(function(){Canvas=function(img){if(!img)return;var canvas=document.createElement('canvas');var context=canvas.getContext('2d');var flag=false;canvas.width=img.width;canvas.height=img.height;context.drawImage(img,0,0);if(img.parentNode.tagName=='A'){parent=img.parentNode.parentNode;child=img.parentNode;}else{parent=img.parentNode;child=img;}parent.replaceChild(canvas,child);function pos(event){var valueT=0,valueL=0,element=canvas;do{valueT+=element.offsetTop||0;valueL+=element.offsetLeft||0;if(element.offsetParent==document.body)if(element.style.position=='absolute')break;element=element.offsetParent;}while(element);return[event.pageX-valueL,event.pageY-valueT];}function start(event){var l=pos(event);context.moveTo(l[0],l[1]);flag=true;}function draw(event){if(!flag)return;var l=pos(event);context.lineTo(l[0],l[1]);context.stroke();}function end(event){flag=false;}canvas.addEventListener('mousedown',start,false);canvas.addEventListener('mousemove',draw,false);canvas.addEventListener('mouseup',end,false);};for(var i=0,l=document.images.length;i<l;i++)new Canvas(document.images[0]);})()
まだまだ
絵が描けない画像があったりとバグ多いですが、お試しってことで。