react-pixelate/build/index.js

React library to pixelate images or elements

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var ImagePixelated = function (_a) {
    var src = _a.src, width = _a.width, height = _a.height, _b = _a.pixelSize, pixelSize = _b === void 0 ? 5 : _b, centered = _a.centered, fillTransparencyColor = _a.fillTransparencyColor;
    var canvasRef = React.useRef();
    React.useEffect(function () {
        pixelate({
            src: src,
            width: width,
            height: height,
            pixelSize: pixelSize,
            centered: centered,
            fillTransparencyColor: fillTransparencyColor
        });
    }, [src, width, height, pixelSize, centered, fillTransparencyColor]);
    var pixelate = function (_a) {
        var src = _a.src, width = _a.width, height = _a.height, pixelSize = _a.pixelSize, centered = _a.centered, fillTransparencyColor = _a.fillTransparencyColor;
        var img = new Image();
        img.crossOrigin = "anonymous";
        img.src = src;
        img.onload = function () {
            var canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
            if (canvas) {
                var ctx = canvas.getContext("2d");
                img.width = width ? width : img.width;
                img.height = height ? height : img.height;
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0, img.width, img.height);
                paintPixels(ctx, img, pixelSize, centered, fillTransparencyColor);
                img = undefined;
            }
        };
    };
    var paintPixels = function (ctx, img, pixelSize, centered, fillTransparencyColor) {
        if (!isNaN(pixelSize) && pixelSize > 0) {
            for (var x = 0; x < img.width + pixelSize; x += pixelSize) {
                for (var y = 0; y < img.height + pixelSize; y += pixelSize) {
                    var xColorPick = x;
                    var yColorPick = y;
                    if (x >= img.width) {
                        xColorPick = x - (pixelSize - (img.width % pixelSize) / 2) + 1;
                    }
                    if (y >= img.height) {
                        yColorPick = y - (pixelSize - (img.height % pixelSize) / 2) + 1;
                    }
                    var rgba = ctx.getImageData(xColorPick, yColorPick, 1, 1).data;
                    ctx.fillStyle =
                        rgba[3] === 0
                            ? fillTransparencyColor
                            : "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")";
                    if (centered) {
                        ctx.fillRect(Math.floor(x - (pixelSize - (img.width % pixelSize) / 2)), Math.floor(y - (pixelSize - (img.height % pixelSize) / 2)), pixelSize, pixelSize);
                    }
                    else {
                        ctx.fillRect(x, y, pixelSize, pixelSize);
                    }
                }
            }
        }
    };
    return React__default['default'].createElement("canvas", { ref: canvasRef });
};

var colors = [
    "rgb(211,211,211,0.9)",
    "rgb(194,194,194,0.9)",
    "rgb(234,234,234,0.9)",
    "rgb(187,187,187,0.9)",
    "rgb(176,176,176,0.9)",
    "rgb(205,205,205,0.9)",
    "rgb(225,225,225,0.9)",
    "rgb(233,233,233,0.9)",
    "rgb(220,220,220,0.9)",
    "rgb(228,228,228,0.9)"
];
var ElementPixelated = function (_a) {
    var children = _a.children, _b = _a.pixelSize, pixelSize = _b === void 0 ? 5 : _b;
    var childNodeRef = React.useRef();
    var canvasRef = React.useRef();
    React.useEffect(function () {
        var paintPixels = function (_a) {
            var ctx = _a.ctx, img = _a.img, pixelSize = _a.pixelSize;
            if (!isNaN(pixelSize) && pixelSize > 0) {
                for (var x = 0; x < img.width + pixelSize; x += pixelSize) {
                    for (var y = 0; y < img.height + pixelSize; y += pixelSize) {
                        // Random color and paint it
                        var colorIndex = Math.floor(Math.random() * 10);
                        ctx.fillStyle = colors[colorIndex];
                        ctx.fillRect(x, y, pixelSize, pixelSize);
                    }
                }
            }
        };
        var pixelate = function () {
            var _a = childNodeRef.current, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight;
            // create img that will be later painted into the canvas
            var img = new Image(offsetWidth, offsetHeight);
            img.crossOrigin = "anonymous";
            var canvas = canvasRef.current;
            var ctx = canvas.getContext("2d");
            img.width = img.width;
            img.height = img.height;
            canvas.width = img.width;
            canvas.height = img.height;
            // we paint the image into the canvas
            // this is needed to get RGBA info out of each pixel
            ctx.drawImage(img, 0, 0, img.width, img.height);
            paintPixels({ ctx: ctx, img: img, pixelSize: pixelSize });
            img = null;
        };
        pixelate();
    }, [pixelSize]);
    return (React__default['default'].createElement("div", { style: { position: "relative" }, ref: childNodeRef },
        children,
        React__default['default'].createElement("canvas", { style: {
                position: "absolute",
                top: 0,
                bottom: 0,
                left: 0,
                right: 0
            }, ref: canvasRef })));
};

exports.ElementPixelated = ElementPixelated;
exports.ImagePixelated = ImagePixelated;