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]);})()

何してるか

  • 画像探してきて、canvasと入れ替える。
  • canvasの背景画像として元画像読み込む
  • マウスダウン中に絵が描けるようイベント割り当て

まだまだ

絵が描けない画像があったりとバグ多いですが、お試しってことで。