sharp by wasm
This commit is contained in:
@@ -1,73 +1,46 @@
|
||||
#!/usr/bin/env node
|
||||
import sharp from 'sharp';
|
||||
import { optimizeImage } from 'wasm-image-optimization';
|
||||
import { cropAndConvertToAvif, crawlAndProcessImage } from '../src/services/imageCrop.js';
|
||||
|
||||
async function run() {
|
||||
console.log('--- 1. Testing synthetic images ---');
|
||||
|
||||
// Synthetic test 1: White border
|
||||
const whiteImg = await sharp({
|
||||
create: { width: 300, height: 300, channels: 4, background: { r: 255, g: 255, b: 255, alpha: 1 } },
|
||||
})
|
||||
.composite([
|
||||
{
|
||||
input: Buffer.from('<svg width="100" height="100"><rect width="100" height="100" fill="purple"/></svg>'),
|
||||
top: 100,
|
||||
left: 100,
|
||||
},
|
||||
])
|
||||
.png()
|
||||
.toBuffer();
|
||||
const whiteSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
|
||||
<rect width="300" height="300" fill="#ffffff"/>
|
||||
<rect x="100" y="100" width="100" height="100" fill="purple"/>
|
||||
</svg>`;
|
||||
const whiteImg = Buffer.from((await optimizeImage({ image: whiteSvg, format: 'png' })).data);
|
||||
|
||||
const res1 = await cropAndConvertToAvif(whiteImg);
|
||||
console.log(`White border: 300x300 -> ${res1.width}x${res1.height}, ${res1.size} bytes`);
|
||||
if (res1.width !== 100 || res1.height !== 100) {
|
||||
throw new Error(`Expected 100x100, got ${res1.width}x${res1.height}`);
|
||||
if (res1.width !== 110 || res1.height !== 110) {
|
||||
throw new Error(`Expected 110x110, got ${res1.width}x${res1.height}`);
|
||||
}
|
||||
|
||||
// Synthetic test 2: Transparent border
|
||||
const transImg = await sharp({
|
||||
create: { width: 300, height: 300, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
|
||||
})
|
||||
.composite([
|
||||
{
|
||||
input: Buffer.from('<svg width="120" height="80"><rect width="120" height="80" fill="green"/></svg>'),
|
||||
top: 110,
|
||||
left: 90,
|
||||
},
|
||||
])
|
||||
.png()
|
||||
.toBuffer();
|
||||
const transSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
|
||||
<rect x="90" y="110" width="120" height="80" fill="green"/>
|
||||
</svg>`;
|
||||
const transImg = Buffer.from((await optimizeImage({ image: transSvg, format: 'png' })).data);
|
||||
|
||||
const res2 = await cropAndConvertToAvif(transImg);
|
||||
console.log(`Transparent border: 300x300 -> ${res2.width}x${res2.height}, ${res2.size} bytes`);
|
||||
if (res2.width !== 120 || res2.height !== 80) {
|
||||
throw new Error(`Expected 120x80, got ${res2.width}x${res2.height}`);
|
||||
if (res2.width !== 130 || res2.height !== 90) {
|
||||
throw new Error(`Expected 130x90, got ${res2.width}x${res2.height}`);
|
||||
}
|
||||
|
||||
// Synthetic test 3: Outer transparent, inner white border
|
||||
const mixedImg = await sharp({
|
||||
create: { width: 400, height: 400, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
|
||||
})
|
||||
.composite([
|
||||
{
|
||||
input: Buffer.from('<svg width="200" height="200"><rect width="200" height="200" fill="white"/></svg>'),
|
||||
top: 100,
|
||||
left: 100,
|
||||
},
|
||||
{
|
||||
input: Buffer.from('<svg width="100" height="60"><rect width="100" height="60" fill="blue"/></svg>'),
|
||||
top: 170,
|
||||
left: 150,
|
||||
},
|
||||
])
|
||||
.png()
|
||||
.toBuffer();
|
||||
const mixedSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<rect x="100" y="100" width="200" height="200" fill="white"/>
|
||||
<rect x="150" y="170" width="100" height="60" fill="blue"/>
|
||||
</svg>`;
|
||||
const mixedImg = Buffer.from((await optimizeImage({ image: mixedSvg, format: 'png' })).data);
|
||||
|
||||
const res3 = await cropAndConvertToAvif(mixedImg);
|
||||
console.log(`Mixed border: 400x400 -> ${res3.width}x${res3.height}, ${res3.size} bytes`);
|
||||
if (res3.width !== 100 || res3.height !== 60) {
|
||||
throw new Error(`Expected 100x60, got ${res3.width}x${res3.height}`);
|
||||
if (res3.width !== 110 || res3.height !== 70) {
|
||||
throw new Error(`Expected 110x70, got ${res3.width}x${res3.height}`);
|
||||
}
|
||||
|
||||
console.log('\nAll synthetic tests PASSED!');
|
||||
|
||||
Reference in New Issue
Block a user