fix: missing raster-images causing <image> to fail to render

Cargo.toml

@@ -33,6 +33,7 @@ js-sys = "0.3.60"
 resvg = { version = "0.25.0", default-features = false, features = [
     "filter",
     "dump-svg",
+    "raster-images",
 ] }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
@@ -41,6 +42,7 @@ napi-derive = "2.9.1"
 resvg = { version = "0.25.0", default-features = false, features = [
     "filter",
     "dump-svg",
+    "raster-images",
     "text",
 ] }
 

__test__/index.spec.ts

@@ -3,11 +3,54 @@ import { join } from 'path'
 
 import test from 'ava'
 import jimp from 'jimp-compact'
+import fetch from 'node-fetch'
 
 import { Resvg, renderAsync } from '../index'
 
 import { jimpToRgbaPixels } from './helper'
 
+test('Use href to load a JPG image without alpha', async (t) => {
+  const imgUrl = 'http://tva2.sinaimg.cn/crop.0.0.250.250.80/534b48acjw8ehw72edguyj206y06yq32.jpg'
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image href="${imgUrl}" width="80" height="80"/>
+</svg>`
+  const resvg = new Resvg(svg, {
+    font: {
+      loadSystemFonts: false,
+    },
+  })
+  const resolved = await Promise.all(
+    resvg.imagesToResolve().map(async (url) => {
+      console.info('image url', url)
+      const img = await fetch(url)
+      const buffer = await img.arrayBuffer()
+      return {
+        url,
+        buffer: Buffer.from(buffer),
+      }
+    }),
+  )
+  if (resolved.length > 0) {
+    for (const result of resolved) {
+      const { url, buffer } = result
+      resvg.resolveImage(url, buffer)
+    }
+  }
+  const pngData = resvg.render()
+  const resvgPngBuffer = pngData.asPng()
+  const result1 = await jimp.read(resvgPngBuffer)
+
+  const jimpImg = await fetch(imgUrl)
+  const jimpBuffer = await jimpImg.arrayBuffer()
+  const result2 = await jimp.read(jimpBuffer)
+
+  const r1 = new jimp({ data: result1.bitmap.data, width: pngData.width, height: pngData.height })
+  const r2 = new jimp({ data: result2.bitmap.data, width: result2.bitmap.width, height: result2.bitmap.height })
+
+  t.is(result1.hasAlpha(), false)
+  t.is(jimp.diff(r1, r2, 0.01).percent, 0) // 0 means similar, 1 means not similar
+})
+
 test('svg to RGBA pixels Array', async (t) => {
   const svg = `<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect fill="red" x="0" y="0" width="5" height="5"></rect>
@@ -270,7 +313,7 @@ test('should render HEXA color format', async (t) => {
 
   const r1 = new jimp({ data: HEXABuffer.bitmap.data, width: 200, height: 200 })
   const r2 = new jimp({ data: RGBABuffer.bitmap.data, width: 200, height: 200 })
-  const diff = await jimp.diff(r1, r2, 0.01)
+  const diff = jimp.diff(r1, r2, 0.01)
 
   t.is(diff.percent, 0) // 0 means similar, 1 means not similar
 })

__test__/wasm.spec.ts

@@ -4,6 +4,7 @@ import { join } from 'path'
 
 import test from 'ava'
 import jimp from 'jimp-compact'
+import fetch from 'node-fetch'
 
 import { Resvg, initWasm } from '../wasm'
 
@@ -14,6 +15,44 @@ test.before(async () => {
   await initWasm(fs.readFile(join(__dirname, '../wasm/index_bg.wasm')))
 })
 
+test('Use href to load a JPG image without alpha', async (t) => {
+  const imgUrl = 'http://tva2.sinaimg.cn/crop.0.0.250.250.80/534b48acjw8ehw72edguyj206y06yq32.jpg'
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image href="${imgUrl}" width="80" height="80"/>
+</svg>`
+  const resvg = new Resvg(svg)
+  const resolved = await Promise.all(
+    resvg.imagesToResolve().map(async (url) => {
+      console.info('image url', url)
+      const img = await fetch(url)
+      const buffer = await img.arrayBuffer()
+      return {
+        url,
+        buffer: Buffer.from(buffer),
+      }
+    }),
+  )
+  if (resolved.length > 0) {
+    for (const result of resolved) {
+      const { url, buffer } = result
+      resvg.resolveImage(url, buffer)
+    }
+  }
+  const pngData = resvg.render()
+  const resvgPngBuffer = Buffer.from(pngData.asPng())
+  const result1 = await jimp.read(resvgPngBuffer)
+
+  const jimpImg = await fetch(imgUrl)
+  const jimpBuffer = Buffer.from(await jimpImg.arrayBuffer())
+  const result2 = await jimp.read(jimpBuffer)
+
+  const r1 = new jimp({ data: result1.bitmap.data, width: pngData.width, height: pngData.height })
+  const r2 = new jimp({ data: result2.bitmap.data, width: result2.bitmap.width, height: result2.bitmap.height })
+
+  t.is(result1.hasAlpha(), false)
+  t.is(jimp.diff(r1, r2, 0.01).percent, 0) // 0 means similar, 1 means not similar
+})
+
 test('svg to RGBA pixels Array', async (t) => {
   const svg = `<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect fill="red" x="0" y="0" width="5" height="5"></rect>
@@ -183,7 +222,7 @@ test('should render HEXA color format', async (t) => {
 
   const r1 = new jimp({ data: HEXABuffer.bitmap.data, width: 200, height: 200 })
   const r2 = new jimp({ data: RGBABuffer.bitmap.data, width: 200, height: 200 })
-  const diff = await jimp.diff(r1, r2, 0.01)
+  const diff = jimp.diff(r1, r2, 0.01)
 
   t.is(diff.percent, 0) // 0 means similar, 1 means not similar
 })