webpack-image-placeholder-loader
Version:
Generate a solid color image or blurred image as placeholder
105 lines • 4.34 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.raw = void 0;
const fast_average_color_1 = __importDefault(require("fast-average-color"));
const schema_utils_1 = require("schema-utils");
const sharp_1 = __importDefault(require("sharp"));
const tinycolor2_1 = __importDefault(require("tinycolor2"));
const webpack_loader_util_1 = require("@calvin-l/webpack-loader-util");
const color_1 = require("./helpers/color");
const getBlurredSvg_1 = __importDefault(require("./helpers/getBlurredSvg"));
const validation_1 = require("./helpers/validation");
const options_json_1 = __importDefault(require("./options.json"));
exports.raw = true;
function default_1(content) {
const callback = this.async();
const defaultOptions = {
format: "base64",
size: 1,
color: "sqrt",
backgroundColor: "#FFF",
esModule: true,
blurQuality: 1,
};
const options = {
...defaultOptions,
...(0, webpack_loader_util_1.getOptions)(this, true, true),
};
(0, schema_utils_1.validate)(options_json_1.default, options, {
name: "Image Placeholder Loader",
baseDataPath: "options",
});
const { format, size, color, backgroundColor, esModule, blurQuality } = options;
(0, validation_1.validateBlurQuality)(blurQuality);
(0, validation_1.validateColor)(color);
(0, validation_1.validatebackgroundColor)(backgroundColor);
processImage(content, { format, size, color, backgroundColor, blurQuality })
.then((result) => {
callback(null, `${esModule ? "export default" : "module.exports ="} ${JSON.stringify(result)}`);
})
.catch((e) => {
throw e;
});
}
exports.default = default_1;
async function processImage(content, { format, size, color, backgroundColor, blurQuality, }) {
const sharpImage = (0, sharp_1.default)(Buffer.from(content));
const resultColor = await getColor(sharpImage, color, backgroundColor);
const imageSize = await getSize(sharpImage);
const output = await getOutput(resultColor, size, format, imageSize, sharpImage, blurQuality);
return output;
}
async function getColor(sharpImage, color, backgroundColor) {
const tcColor = (0, tinycolor2_1.default)(color);
const backgroundColorRgb = (0, color_1.rgbaToRgb)((0, tinycolor2_1.default)(backgroundColor).toRgb());
if (tcColor.isValid())
return (0, color_1.mixRgbaWithRgb)(tcColor.toRgb(), backgroundColorRgb);
const data = await sharpImage
.flatten({ background: backgroundColorRgb })
.ensureAlpha()
.raw()
.toBuffer();
const fac = new fast_average_color_1.default();
const resultRgba = fac.getColorFromArray4(data, {
algorithm: color,
defaultColor: (0, color_1.rgbToRgbaArray)(backgroundColorRgb),
});
fac.destroy();
return { r: resultRgba[0], g: resultRgba[1], b: resultRgba[2] };
}
async function getSize(sharpImage) {
const { height, width } = await sharpImage.metadata();
return { width, height };
}
/**
* combine all the given information to generate the final output of this loader
*/
async function getOutput(color, size, format, imageSize, sharpImage, blurQuality) {
const tcColor = (0, tinycolor2_1.default)(color);
if (format === "rgb")
return tcColor.toRgbString();
if (format === "hex")
return tcColor.toHexString();
if (format === "array")
return (0, color_1.rgbToRgbArray)(tcColor.toRgb());
if (format === "blurred-svg")
return (0, getBlurredSvg_1.default)(sharpImage, imageSize, blurQuality);
const width = size === "original" ? imageSize.width : size;
const height = size === "original" ? imageSize.height : size;
return `data:image/png;base64,${(await (0, sharp_1.default)({
create: {
width: width !== null && width !== void 0 ? width : 1,
height: height !== null && height !== void 0 ? height : 1,
channels: 3,
background: (0, color_1.rgbaToRgb)(tcColor.toRgb()),
},
})
.png({
compressionLevel: 9,
})
.toBuffer()).toString("base64")}`;
}
//# sourceMappingURL=index.js.map