https://www.patrick-wied.at/talks/image-protection/#/ https://www.patrick-wied.at/talks/image-protection/demos/demo-encrypted.html

image-protection.js

var decoder = (function () {
    var canvas, ctx;
    var init = function () {
        var list = document.getElementsByClassName('encrypted');
        for (var i = 0; i < list.length; i++) {
            var entry = list[i];
            var wrapper = document.createElement('div');
            wrapper.className = 'imagesafe';
            var style = entry.style;
            var pos = 'float:' + (style.float || style.cssFloat) + ';left:' + style.left + 'px;top:' + style.top + 'px;';
            wrapper.style.cssText = 'width:' + entry.width + 'px;height:' + entry.height + 'px;' + pos;
            var parent = list[i].parentNode;
            parent.replaceChild(wrapper, entry);
            wrapper.appendChild(entry);
            uncrypt(entry, {
                swapFactor: 4,
                jumpFactor: 5
            });
        }
        uninitialize();
    };
    var uncrypt = function (img, config) {
        if (img) {
            canvas = document.createElement('canvas');
            canvas.style.cssText = 'position:absolute;top:0;left:0;'
            ctx = canvas.getContext('2d');
            var width = canvas.width = img.width;
            var height = canvas.height = img.height;
            var parent = img.parentNode;
            parent.appendChild(canvas);
            ctx.drawImage(img, 0, 0);
        } else {
            var width = canvas.width;
            var height = canvas.height;
        }
        var imgData = ctx.getImageData(0, 0, width, height);
        var data = imgData.data;
        var dlen = data.length;
        var plen = 4;
        var jump = plen * (config.jumpFactor || 4);
        var swap = plen * (config.swapFactor || 2);
        for (var i = 4; i < dlen; i += jump) {
            var d1 = data[i],
                d2 = data[i + 1],
                d3 = data[i + 2],
                d4 = data[i + 3];
            data[i] = data[i + swap];
            data[i + 1] = data[i + swap + 1];
            data[i + 2] = data[i + swap + 2];
            data[i + 3] = data[i + swap + 3];
            data[i + swap] = d1;
            data[i + swap + 1] = d2;
            data[i + swap + 2] = d3;
            data[i + swap + 3] = d4;
        }
        imgData.data = data;
        ctx.putImageData(imgData, 0, 0);
    };
    var uninitialize = function () {
        HTMLCanvasElement.prototype.toDataURL = function () {};
    };
    return {
        init: init
    }
}());
if (window.addEventListener) {
    window.addEventListener('load', decoder.init, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', decoder.init);
}