@ cssints/ 占位符
图像占位符用于 点缀数字 : placeholder(path) 当构建运行和给出图像时, 读取图像
<image> 画到真实的负载, 要么是图像颜色的渐变
或图像的 缩略图 作为一个微小的PNG数据
URL (中文(简体) ). 它是一个价值成员 cssints/plugin scope()因此它进入 backgroundImage (或 maskImage) (中文(简体) ). 没有运行时间.
import { backgroundImage, cn, backgroundSize } from "cssints" with { type: "cssints" };
import { placeholder } from "@cssints/placeholder" with { type: "cssints" };
// placeholder(path, { mode? }): the path is relative to the working directory
export const hero = backgroundImage(placeholder("src/hero.jpg"));
export const card = cn(
backgroundImage(placeholder("src/card.png", { mode: "thumbhash" })),
backgroundSize("cover"),
);
对于由四个四角(红、蓝、绿、白)组成的PNG:
/* mode "gradient" (the default): a 4 × 3 grid, a radial gradient per cell, brightest on top, over the average colour */
._11mb38d {
background-image:
radial-gradient(at 67% 100%, #ffffff, transparent 50%),
radial-gradient(at 100% 100%, #ffffff, transparent 50%),
radial-gradient(at 67% 50%, #bcbcff, transparent 50%),
/* … one per cell, 12 in all … */ radial-gradient(at 100% 0, #0000ff, transparent 50%),
linear-gradient(#bc96bc, #bc96bc);
}
/* mode "thumbhash": the ThumbHash rendered, 16 px on the long side, about 0.5 kB */
._179cifn {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAM…");
}
格式
JPEG( 基线和渐进式, 通过 日语)和 PNG(每个颜色类型和位
深度,通过 弹簧),两个平版JavaScript:没有编译,没有本地二进制
(正字未用). 格式从文件的第一个字节来读取,而不是它的名字. WebP、AVIF、GIF和SVG正在建设
命名格式的错误( e)cssints: placeholder: src/hero.webp: a WebP image: JPEG and PNG are read: 给出 JPEG 或
PNG 复制的图像( 它可以是小的; 只有它的颜色被读取) .
规则
- 辩相.
path是一个字符串,相对于工作目录(process.cwd(),维特下的项目根, 作为fs供应商@cssints/icons读它.mode实值"gradient"(默认)或"thumbhash"两者都是 检查类型和建设时间. gradient以线性光线和加权表示的4×3个单元格(3×4个肖像图像)的网格平均图像 由alpha,所以一个透明的部分不增加颜色,一个横跨红色和绿色的细胞是光的混合体,而不是泥地 sRGB平均值. 每个单元格都是radial-gradient(at x y, colour, transparent 50%)在图像中的位置0财务报告和审定财务报表100%),由最亮的上方(如不显出位置者)所排序linear-gradient()表示整个图像的平均颜色,以填补梯度所留下的颜色。 一个不透明的单元格 实值#rrggbbaa。值是13个图像的列表,大约为0.7 kB.thumbhash用缩略图编码图像( 平均最多100 px a side first), 使散列, 平均值 写成PNG:约0.5 kB,其中ThambHash自己的数据URL(32 px, 未压缩)约为5克B. 浏览器的平滑提升会模糊. 它保持了宽度比,所以它与backgroundSize("cover")或者说"100% 100%"。 。 。 .- 决取相取. 同样的文件在每一个构建上都给出相同的CSS. SHA-256对结果进行缓存 文件的内容和模式,所以从许多模块中使用的图像会被解码一次.
- 错误,在调用时:无法读取的文件(
cssints: placeholder: cannot read src/nope.png (paths are relative to /app)),它不读取的格式(上),不解码的文件(cssints: placeholder: src/broken.png: …,解码器的信息),语法以外的一种模式(placeholder(2).mode: unexpected "blurhash" …),以及图像不走的占位符(css.color(placeholder(…)),在类型和构建时出错 时间).
限制
- 在dev中,一个被编辑的图像更新了使用它的模块的CSS(
dependsOn联 合 国cssints/plugin); 缺少图像 在构建错误后添加,需要编辑模块或重新加载. - 这个
gradient值是一个图像列表,因此它符合一个需要列表的属性(background-image, (中文(简体) ),mask-image(三); 拥有一项的财产<image>(单位:千美元)list-style-image, (中文(简体) ),border-image-source() 在建设时拒绝:使用thumbhash在这里. - 没有WebP或AVIF解码器(一个WASM 1会给建筑增加几百 kB);网格大小和缩略图大小是 固定; 无模糊模式 .
- 图像被解码为整体:一个非常大的JPEG(十兆像素)每建造一次,其像素在内存中花费.
cd packages/placeholder && bun run test # colour extraction on synthetic pixels, fixtures through the engine (output, errors)
cd packages/placeholder && bun run typecheck # and the type test, test/types/placeholder.ts
贷项
梯度布局如下 未选占位符 (麻省理工学院,Matt Kane). 缩略图模式使用 缩略图 (麻省理工,埃文·华莱士), 日语 (BSD-3-Clause)和 弹簧 (麻省理工学院),属地. 没有复制代码 .