Skip to content

Commit

Permalink
feat(wasm): support for getting the default font-family from `fontsBu…
Browse files Browse the repository at this point in the history 
…ffers`
  • Loading branch information
@yisibl
yisibl committed Aug 6, 2023
1 parent d49c695 commit 2c47bb3
Show file tree
Hide file tree
Showing 4 changed files with 207 additions and 100 deletions.
73 changes: 48 additions & 25 deletions __test__/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,52 @@ test('Load custom font', async (t) => {
t.is(result.getHeight(), 687)
})

test('should be load custom fontFiles(no defaultFontFamily option)', (t) => {
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<text fill="blue" font-family="serif" font-size="120">
<tspan x="40" y="143">水</tspan>
</text>
</svg>
`
const resvg = new Resvg(svg, {
font: {
fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'],
loadSystemFonts: false,
// defaultFontFamily: 'Source Han Serif CN Light',
},
logLevel: 'debug',
})
const pngData = resvg.render()
const originPixels = pngData.pixels.toJSON().data

// Find the number of blue `rgb(0,255,255)`pixels
t.is(originPixels.join(',').match(/0,0,255/g)?.length, 1726)
})

test('should be load custom fontDirs(no defaultFontFamily option)', (t) => {
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<text fill="blue" font-family="serif" font-size="120">
<tspan x="40" y="143">水</tspan>
</text>
</svg>
`
const resvg = new Resvg(svg, {
font: {
fontDirs: ['./example/'],
// loadSystemFonts: false,
// defaultFontFamily: 'Source Han Serif CN Light',
},
logLevel: 'debug',
})
const pngData = resvg.render()
const originPixels = pngData.pixels.toJSON().data

// Find the number of blue `rgb(0,255,255)`pixels
t.is(originPixels.join(',').match(/0,0,255/g)?.length, 1726)
})

test('Async rendering', async (t) => {
const filePath = '../example/text.svg'
const svg = await fs.readFile(join(__dirname, filePath))
Expand Down Expand Up @@ -459,9 +505,9 @@ test('should render using font buffer provided by options', async (t) => {
const resvg = new Resvg(svg, {
font: {
fontFiles: ['./__test__/Pacifico-Regular.ttf'],
// fontDirs: ['./__test__/',],
// fontDirs: ['./__test__/'],
// loadSystemFonts: false,
// defaultFontFamily: ' ',
defaultFontFamily: '',
},
logLevel: 'debug',
})
Expand All @@ -475,29 +521,6 @@ test('should render using font buffer provided by options', async (t) => {
t.is(jimp.diff(expectedResult, actualPng, 0.01).percent, 0) // 0 means similar, 1 means not similar
})

test('should be load custom fonts', (t) => {
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<text fill="blue" font-family="serif" font-size="120">
<tspan x="40" y="143">水</tspan>
</text>
</svg>
`
const resvg = new Resvg(svg, {
font: {
fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'],
loadSystemFonts: false,
defaultFontFamily: 'Source Han Serif CN Light',
},
logLevel: 'debug',
})
const pngData = resvg.render()
const originPixels = pngData.pixels.toJSON().data

// Find the number of blue `rgb(0,255,255)`pixels
t.is(originPixels.join(',').match(/0,0,255/g)?.length, 1726)
})

test('should throw because invalid SVG attribute (width attribute is 0)', (t) => {
const error = t.throws(
() => {
Expand Down
65 changes: 62 additions & 3 deletions __test__/wasm.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,66 @@ test('Set the background without alpha by hsla()', async (t) => {
t.is(result.hasAlpha(), false)
})


test('Load custom font(use fontsBuffers option)', async (t) => {
const filePath = '../example/text.svg'
const svg = await fs.readFile(join(__dirname, filePath))
const fontBuffer = await fs.readFile(join(__dirname, '../example/SourceHanSerifCN-Light-subset.ttf'))
const resvg = new Resvg(svg.toString('utf-8'), {
font: {
fontsBuffers: [fontBuffer], // Load custom fonts.
},
})
const pngBuffer = resvg.render().asPng()
const result = await jimp.read(Buffer.from(pngBuffer))

t.is(result.getWidth(), 1324)
t.is(result.getHeight(), 687)
})

test('should be load custom font(no defaultFontFamily option)', async (t) => {
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<text fill="blue" font-family="serif" font-size="120">
<tspan x="40" y="143">水</tspan>
</text>
</svg>
`
const fontBuffer = await fs.readFile(join(__dirname, '../example/SourceHanSerifCN-Light-subset.ttf'))
const resvg = new Resvg(svg, {
font: {
fontsBuffers: [fontBuffer],
// defaultFontFamily: 'Source Han Serif CN Light',
},
})
const pngData = resvg.render()
const originPixels = Array.from(pngData.pixels)

// Find the number of blue `rgb(0,255,255)`pixels
t.is(originPixels.join(',').match(/0,0,255/g)?.length, 1726)
})

test('should be load custom fontsBuffers(no defaultFontFamily option)', async (t) => {
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<text fill="blue" font-family="serif" font-size="120">
<tspan x="40" y="143">水</tspan>
</text>
</svg>
`
const fontBuffer = await fs.readFile(join(__dirname, '../example/SourceHanSerifCN-Light-subset.ttf'))
const resvg = new Resvg(svg, {
font: {
fontsBuffers: [fontBuffer],
},
})
const pngData = resvg.render()
const originPixels = Array.from(pngData.pixels)

// Find the number of blue `rgb(0,255,255)`pixels
t.is(originPixels.join(',').match(/0,0,255/g)?.length, 1726)
})

test('should generate a 80x80 png and opaque', async (t) => {
const svg = `<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect fill="green" x="0" y="0" width="100" height="100"></rect>
Expand Down Expand Up @@ -330,7 +390,7 @@ test('should return undefined if bbox is invalid', (t) => {

test('should render using font buffer provided by options', async (t) => {
const svg = `<svg width='480' height='150' viewBox='-20 -80 550 100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<text x='0' y='0' font-size='100' fill='#000000'>Font Buffer</text>
<text x='0' y='0' font-size='100' fill='#000'>Font Buffer</text>
</svg>`

const pacificoBuffer = await fs.readFile(join(__dirname, './Pacifico-Regular.ttf'))
Expand All @@ -339,8 +399,7 @@ test('should render using font buffer provided by options', async (t) => {
const options = {
font: {
fontsBuffers: [pacificoBuffer],
loadSystemFonts: false,
defaultFontFamily: 'Pacifico',
// defaultFontFamily: 'Pacifico',
},
}

Expand Down
Loading

0 comments on commit 2c47bb3

Please sign in to comment.