Skip to content

Commit

Permalink
feat: render result as a new class (#94)
Browse files Browse the repository at this point in the history 
* feat: render result as a new class

* fix: RenderedImage napi-rs binding

* fix: wasm test

* feat: use the `asPng()` in test and example

* chore: remove oslllo-svg2 from benchmark

Co-authored-by: yisibl <[email protected]>
  • Loading branch information
@zimond @yisibl
zimond and yisibl authored Apr 2, 2022
1 parent f341a55 commit 3a10084
Show file tree
Hide file tree
Showing 21 changed files with 354 additions and 207 deletions.
33 changes: 22 additions & 11 deletions __test__/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ test('fit to width', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.getWidth(), 1200)
t.is(result.getHeight(), 623)
Expand Down Expand Up @@ -56,7 +57,8 @@ test('SVG size must be equal to PNG size', async (t) => {
const resvg = new Resvg(svg)

const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)
const { width, height } = resvg

t.is(width, result.getWidth())
Expand All @@ -71,7 +73,8 @@ test('Set the background with alpha by rgba().', async (t) => {
background: 'rgba(0, 0, 0, 0.6)',
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.hasAlpha(), true)
})
Expand All @@ -84,7 +87,8 @@ test('Set the background with alpha by rgb().', async (t) => {
background: 'rgb(255, 0, 0, .832)',
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.hasAlpha(), true)
})
Expand All @@ -97,7 +101,8 @@ test('Set the background without alpha by hsla()', async (t) => {
background: 'hsla(255, 80%, 50%, 1)',
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.hasAlpha(), false)
})
Expand All @@ -114,7 +119,8 @@ test('Load custom font', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.getWidth(), 1324)
t.is(result.getHeight(), 687)
Expand Down Expand Up @@ -181,7 +187,8 @@ test('should generate a 80x80 png and opaque', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.getWidth(), 100 - 20)
t.is(result.getHeight(), 100 - 20)
Expand All @@ -194,7 +201,8 @@ test('should generate a 100x100 transparent png', async (t) => {
const svg = `<svg xmlns="http://www.w3.org/2000/svg"></svg>`
const resvg = new Resvg(svg)
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.hasAlpha(), true)
t.is(result.getWidth(), 100)
Expand All @@ -207,7 +215,8 @@ test('should generate a 128x128 png', async (t) => {
background: 'green',
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.hasAlpha(), false)
t.is(result.getWidth(), 128)
Expand All @@ -234,7 +243,8 @@ test('should render `<use xlink:href>` to an `<svg>` element', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.hasAlpha(), false)
t.is(result.getWidth(), 800)
Expand All @@ -259,7 +269,8 @@ test('should render `<use xlink:href>` to an `<defs>` element', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(pngData)
const pngBuffer = pngData.asPng()
const result = await jimp.read(pngBuffer)

t.is(result.hasAlpha(), true)
t.is(result.getWidth(), 900)
Expand Down
27 changes: 18 additions & 9 deletions __test__/wasm.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ test('buffer input', async (t) => {
}
const resvg = new Resvg(svg, opts)
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.hasAlpha(), true)
})
Expand All @@ -39,7 +40,8 @@ test('fit to width', async (t) => {
}
const resvg = new Resvg(svgString, opts)
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.getWidth(), 1200)
t.is(result.getHeight(), 623)
Expand Down Expand Up @@ -78,7 +80,8 @@ test('SVG size must be equal to PNG size', async (t) => {
const resvg = new Resvg(svg)

const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))
const { width, height } = resvg

t.is(width, result.getWidth())
Expand All @@ -94,7 +97,8 @@ test('Set the background with alpha by rgba().', async (t) => {
}
const resvg = new Resvg(svgString, opts)
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.hasAlpha(), true)
})
Expand All @@ -108,7 +112,8 @@ test('Set the background with alpha by rgb().', async (t) => {
}
const resvg = new Resvg(svgString, opts)
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.hasAlpha(), true)
})
Expand All @@ -122,7 +127,8 @@ test('Set the background without alpha by hsla()', async (t) => {
}
const resvg = new Resvg(svgString, opts)
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.hasAlpha(), false)
})
Expand All @@ -140,7 +146,8 @@ test('should generate a 80x80 png and opaque', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.getWidth(), 100 - 20)
t.is(result.getHeight(), 100 - 20)
Expand All @@ -165,7 +172,8 @@ test('should render `<use xlink:href>` to an `<svg>` element', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.hasAlpha(), false)
t.is(result.getWidth(), 800)
Expand All @@ -190,7 +198,8 @@ test('should render `<use xlink:href>` to an `<defs>` element', async (t) => {
},
})
const pngData = resvg.render()
const result = await jimp.read(Buffer.from(pngData))
const pngBuffer = pngData.asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.hasAlpha(), true)
t.is(result.getWidth(), 900)
Expand Down
19 changes: 0 additions & 19 deletions benchmark/bench.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { join } from 'path'

import { createCanvas, Image } from '@napi-rs/canvas'
import b from 'benny'
import Svg2 from 'oslllo-svg2'
import sharp from 'sharp'
import svg2img from 'svg2img'

Expand Down Expand Up @@ -59,13 +58,6 @@ async function run() {
svg2img(svg1.toString('utf8'), { width: 1200, height: 623 }, function (_error, _buffer) {})
}),

b.add('oslllo-svg2(jsdom + node-canvas)', async () => {
const instance = await Svg2(svg1)
const svg = instance.svg
svg.resize({ width: 1200, height: 623 })
instance.png().toBuffer()
}),

b.cycle(),
b.complete(),
)
Expand Down Expand Up @@ -119,13 +111,6 @@ async function run() {
svg2img(icon.toString('utf8'), { width: 386, height: 386 }, function (_error, _buffer) {})
}),

b.add('oslllo-svg2(jsdom + node-canvas)', async () => {
const instance = await Svg2(icon)
const svg = instance.svg
svg.resize({ width: 386, height: 386 })
instance.png().toBuffer()
}),

b.cycle(),
b.complete(),
)
Expand Down Expand Up @@ -169,10 +154,6 @@ async function run() {
svg2img(tiger.toString('utf8'), { width: 900, height: 900 }, function (_error, _buffer) {})
}),

b.add('oslllo-svg2(jsdom + node-canvas)', async () => {
await Svg2(tiger).png().toBuffer()
}),

b.cycle(),
b.complete(),
)
Expand Down
27 changes: 9 additions & 18 deletions example/compare.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ const { join } = require('path')
const { performance } = require('perf_hooks')

const { createCanvas, Image } = require('@napi-rs/canvas')
const Svg2 = require('oslllo-svg2')
const sharp = require('sharp')

const { render } = require('../index')
const { Resvg } = require('../index')

async function main() {
const svg = await fs.readFile(join(__dirname, './anime_girl.svg'))
Expand All @@ -15,7 +14,7 @@ async function main() {
const h = 744 * zoom // resize height

const t0 = performance.now()
const pngData = render(svg, {
const opts = {
fitTo: {
mode: 'width',
value: w,
Expand All @@ -24,14 +23,18 @@ async function main() {
loadSystemFonts: false, // It will be faster to disable loading system fonts.
},
logLevel: 'off',
})
}

const resvg = new Resvg(svg, opts)
const pngData = resvg.render()
const pngBuffer = pngData.asPng()
const t1 = performance.now()

console.info('✨ resvg-js done in', t1 - t0, 'ms')
await fs.writeFile(join(__dirname, './out-resvg-js.png'), pngData)
await fs.writeFile(join(__dirname, './out-resvg-js.png'), pngBuffer)

sharpToPng(svg, w)
skrCanvas(svg, w, h)
osllloSvgToPng(svg, w, h)
}

async function sharpToPng(file, width) {
Expand Down Expand Up @@ -74,16 +77,4 @@ async function skrCanvas(file, width, height) {
await fs.writeFile(join(__dirname, './out-skr-canvas.png'), pngData)
}

async function osllloSvgToPng(file, width, height) {
const t0 = performance.now()

const instance = await Svg2(file)
const svg = instance.svg
svg.resize({ width, height })
instance.png().toFile('example/out-oslllo-svg.png')

const t1 = performance.now()
console.info('✨ oslllo-svg2 done in', t1 - t0, 'ms')
}

main()
12 changes: 6 additions & 6 deletions example/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ async function main() {
}

const t = performance.now()
const rusty = new Resvg(svg, opts)
const pngData = rusty.render()
const resvg = new Resvg(svg, opts)
const pngData = resvg.render()
const pngBuffer = pngData.asPng()

console.info(rusty.width)
console.info(rusty.height)
// console.info(rusty)
console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
console.info('Output PNG Size :', `${pngData.width} x ${pngData.height}`)
console.info('✨ Done in', performance.now() - t, 'ms')

await promises.writeFile(join(__dirname, './text-out.png'), pngData)
await promises.writeFile(join(__dirname, './text-out.png'), pngBuffer)
}

main()
Binary file removed example/out-oslllo-svg.png
View file
Binary file not shown.
Binary file modified example/out-sharp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified example/out-skr-canvas.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 8 additions & 3 deletions example/sprite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,23 @@ async function main() {
mode: 'width',
value: 500,
},
logLevel: 'debug',
font: {
loadSystemFonts: false, // It will be faster to disable loading system fonts.
},
logLevel: 'off',
}

const t = performance.now()
const resvg = new Resvg(svg, opts)
const pngData = resvg.render()
const pngBuffer = pngData.asPng()

console.info('Simplified svg string: \n', resvg.toString())
console.info('SVG original size:', `${resvg.width} x ${resvg.height}px`)
console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
console.info('Output PNG Size :', `${pngData.width} x ${pngData.height}`)
console.info('✨ Done in', performance.now() - t, 'ms')

await promises.writeFile(join(__dirname, './sprite-out.png'), pngData)
await promises.writeFile(join(__dirname, './sprite-out.png'), pngBuffer)
}

main()
7 changes: 4 additions & 3 deletions example/wasm-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,13 @@ async function main() {
const t = performance.now()
const resvg = new Resvg(svg, opts)
const pngData = resvg.render()
const pngBuffer = pngData.asPng()

console.info(resvg.toString())
console.info('SVG original size:', `${resvg.width} x ${resvg.height}px`)
console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
console.info('Output PNG Size :', `${pngData.width} x ${pngData.height}`)
console.info('✨ Done in', performance.now() - t, 'ms')

await fs.writeFile(join(__dirname, './sprite-out-wasm.png'), pngData)
await fs.writeFile(join(__dirname, './sprite-out-wasm.png'), pngBuffer)
}

main()
Loading

1 comment on commit 3a10084

@vercel
Copy link

@vercel vercel bot commented on 3a10084 Apr 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.