スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像に色をつけて、くりんくりん回すやつのコード

CATEGORYjavascript

こちらで使ってる、 モノトーンっぽい画像を赤くしている javascript のコード。
canvas を使ってる。


(function() {
    function insert_red_icon(img, target) {
        // change color with canvas
        // https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas
        let canvas = target.appendChild(Object.assign(document.createElement("canvas"), {
            width: img.width,
            height: img.height,
        }));
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        let imageData = ctx.getImageData(0, 0, img.width, img.height);
        let data = imageData.data;
        for (let i = 0 ; i < data.length ; i += 4) {
            if (data[i] != 0) {
                data[i]     = 255;      // red
//              data[i + 1] =           // green
//              data[i + 2] =           // blue
//              data[i + 3] =           // opacity
            }
        }
        ctx.putImageData(imageData, 0, 0);
    }

    window.addEventListener("DOMContentLoaded", function() {
        document.getElementById("x20170627-0").appendChild(Object.assign(document.createElement("img"), {
//          src: 'https://cdn-ak2.f.st-hatena.com/images/fotolife/a/a-kuma3/20170627/20170627015340.png',
            src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAXEAYAAACqhuhtAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAAbAAAAFwB5QMvHAAAECUlEQVRYw92XbUhTURjHH++9Tdld21y0trAXS4ygaMYsaVhrhb1IKcKSKIlIpFGXKKSgIKEPRfghCEL6JEQfIiKyD40oadZyG26wohccphS6EJfrbl6bk+7tw+NhNlkvdLKX/5fnnmfn3PP8zrnn7HnyFEVRFAWoaXw8kYjHGQZbW7ag1evpzTBd6TRaj0et1moLC0WR/MLRBdq9GxeqoyMS6et78wbg06dUKpWij8SyLMuyACUly5YVF6MvHj99GgEvXMiTJFEcHf3VafLyEEiWr15tb792DeD160gkEqEPlC29XqfT6QCamwXhyBGAuXM1Gp43mxk6r7fb+/r6+wcGZg+I6ONHURRFAK/X5/P7idflogRmNicSyWQyOXtA2RobkyRJIq3587POGMuiPXQIrcXytT+XSkqWLFm0qKgIoL6+rq62NndPWf78WZYBBgbevXv7FiAUCoefPwegfYlNgZWWyrIsy3Jvr98fDIZCAEND0ej79wDopzchw7AswwCsXFlaumIFwP79e/Y4nQBnz54/f/EiAK2dnwJzuTo67t1zuwE8Hq+3u5seSC55vT5fIAAwMhKLxWIANltFxbp1AG73gwednRQWEE1TU3d3INDT8/uBshUMhsPhMIDVarGQD5+GpsDU6nR6cnJycvbBJEmSxscBeJ7n1WrqYP+f/hswlUqlUqlIS5L+ebA5cziO4wDWr7da164l3vZ2arnir4rjMECLZfXqVasAnj178eLly5n/bwZDYaFeD1BeXlZWVpbpbzIZjUbjpUuYK7569dfsGK78xMTBg/v27d1765YgNDU1NgKYTAsWGI2ZfqKYSCSTABUV5eVWK8DChWazybRmDQKdOEH6/TVgqFQKA3Q6ly8vLl669OjRU6eOHRMEgJqanTu3bwfgOMzqHz70eLq6yDiXK/tNU2AjIxoNz/P87KPMm2cwGAyk1d9PnhDwyhWGYRiG0Wgcjo0bKytbW8+caW4+fhxgYiKdTqdJEnz4MJZNRUVZYG1ttbXV1Tt2AOCLfj8QOfRVVQ6H3U68bW3Z/RBQktCePKnTabVarc3W0FBf73Rev87z0zckFiNPWfXY5csfPoyOxuOCMDgYjUajAKkUFoo3bty+fefOzNwRDy2Aw7FpU2UlQH7+9Gt3plgWF27xYkyaMVBy6DNn5EeFO1VQgOMzJW2OQpPUpAcOdHZ2dT1+3NJy967bff9+JvBt27ZudTgA7HabbcMGUtEKAo4bHv52OCTH6enBgIaGaH8ROa774WFMsVpaHj168sTrzVyrdXW7dlVXk5VubcX+586hHRv73oQIQhvjB4Q7WFPj9/t8T58qSigUDAYCioL+mzfRbt78B0KjC4i2qupPx/Oz+gLtlsxmI/7mOgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0wNi0yN1QwMTo1Mzo0MCswOTowMBUNjZoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMDYtMjdUMDE6NTM6NDArMDk6MDBkUDUmAAAAF3RFWHRwbmc6Yml0LWRlcHRoLXdyaXR0ZW4ACKfELPIAAAAASUVORK5CYII=',
            onload: function() {
                insert_red_icon(this, document.getElementById("x20170627-1"));
                insert_red_icon(this, document.getElementById("x20170627-2"));
            },
        }));
    });
})();

参考にしたのは、MDN の「Canvas とピクセル操作 - ウェブデベロッパーガイド | MDN」。

画像はページと同じドメインじゃないと、画像を変更するときにセキュリティチェックに引っかかる。

SecurityError: The operation is insecure.
大抵のブログはファイルサーバが別ドメインなので、data URI scheme を使ってる。



画像をくりんくりん回しているのは、この css 。

/* rotate notification icon when active */
#x20170627-2 {
    display: inline-block;
    animation: my-icon-rotate 2s linear infinite;
}
@keyframes  my-icon-rotate {
    0% { transform: rotateY(0deg); }
    30% { transform: rotateY(360deg); }
    100% { transform: rotateY(360deg); }
}
関連記事
スポンサーサイト

javascript

0 Comments

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。