next-pixelate
Version:
NextJS library to pixelate images or elements
178 lines (164 loc) • 7.91 kB
JavaScript
;
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);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
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, props = __rest(_a, ["src", "width", "height", "pixelSize", "centered", "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", __assign({ ref: canvasRef }, props));
};
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;