search

Brooooooklyn / canvas

High performance skia binding to Node.js. Zero system dependencies and pure npm packages without any postinstall scripts nor node-gyp.
https://vercel.skia.rs
MIT License
1.72k stars 73 forks source link

Support image in svg #859

Open ducan-ne opened 1 month ago

ducan-ne commented 1 month ago

With this given svg file that contains a <image> element, @napi-rs/canvas currently render blank but it should be the image instead, not sure it's a bug or not yet implemented though

<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg"><mask id="satori_om-id"><rect x="0" y="0" width="800" height="400" fill="#fff"></rect></mask><rect x="0" y="0" width="800" height="400" fill="#fff"></rect><clipPath id="satori_cp-id-0"><rect x="363" y="-252" width="75" height="65"></rect></clipPath><mask id="satori_om-id-0"><rect x="363" y="-252" width="75" height="65" fill="#fff"></rect></mask><image x="363" y="-252" width="75" height="65" href="data:image/svg+xml;utf8,%3Csvg  fill=%22%23000%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22NaN%22 height=%22null%22 viewBox=%220 0 75 65%22%3E%3Cpath d=%22M37.59.25l36.95 64H.64l36.95-64z%22%3E%3C/path%3E%3C/svg%3E" preserveAspectRatio="none" clip-path="url(#satori_cp-id-0)" mask="url(#satori_om-id-0)"></image><mask id="satori_om-id-0-0"><rect x="363" y="-252" width="0" height="65" fill="#fff"></rect></mask><clipPath id="satori_cp-id-1"><rect x="0" y="-187" width="800" height="800"></rect></clipPath><mask id="satori_om-id-1"><rect x="0" y="-187" width="800" height="800" fill="#fff"></rect></mask><image x="0" y="-187" width="800" height="800" href="https://wsrv.nl/?url=https://gist.github.com/ducan-ne/7e67570e5e1961411cae7215e006b381/raw/6cd65bc303b345fa0032c543e359c5cdf7e6150e/a.svg" preserveAspectRatio="none" clip-path="url(#satori_cp-id-1)" mask="url(#satori_om-id-1)"></image><mask id="satori_om-id-2"><rect x="304" y="653" width="193" height="0" fill="#fff"></rect></mask><path fill="black" d="M310.9 684L306.0 684L306.0 660.7L310.9 660.7L310.9 670.3L320.9 670.3L320.9 660.7L325.8 660.7L325.8 684L320.9 684L320.9 674.4L310.9 674.4L310.9 684ZM337.8 684.3L337.8 684.3Q335.1 684.3 333.1 683.2Q331.2 682.1 330.1 680.1Q329.1 678.1 329.1 675.4L329.1 675.4Q329.1 672.7 330.1 670.6Q331.2 668.6 333.1 667.5Q335 666.3 337.6 666.3L337.6 666.3Q339.3 666.3 340.8 666.9Q342.3 667.4 343.4 668.5Q344.5 669.6 345.1 671.3Q345.8 673.0 345.8 675.2L345.8 675.2L345.8 676.5L331.0 676.5L331.0 673.5L341.2 673.5Q341.2 672.5 340.8 671.7Q340.3 670.9 339.5 670.4Q338.7 669.9 337.6 669.9L337.6 669.9Q336.5 669.9 335.7 670.4Q334.9 670.9 334.4 671.8Q333.9 672.6 333.9 673.7L333.9 673.7L333.9 676.5Q333.9 677.8 334.4 678.8Q334.9 679.7 335.7 680.2Q336.6 680.7 337.8 680.7L337.8 680.7Q338.6 680.7 339.3 680.5Q340.0 680.3 340.5 679.8Q340.9 679.4 341.2 678.7L341.2 678.7L345.7 679Q345.3 680.6 344.3 681.8Q343.2 683.0 341.6 683.7Q339.9 684.3 337.8 684.3ZM348.9 660.7L353.8 660.7L353.8 684L348.9 684L348.9 660.7ZM357.6 660.7L362.5 660.7L362.5 684L357.6 684L357.6 660.7ZM374.2 684.3L374.2 684.3Q371.6 684.3 369.7 683.2Q367.7 682.1 366.7 680.1Q365.6 678.0 365.6 675.3L365.6 675.3Q365.6 672.6 366.7 670.6Q367.7 668.6 369.7 667.4Q371.6 666.3 374.2 666.3L374.2 666.3Q376.9 666.3 378.8 667.4Q380.7 668.6 381.8 670.6Q382.8 672.6 382.8 675.3L382.8 675.3Q382.8 678.0 381.8 680.1Q380.7 682.1 378.8 683.2Q376.9 684.3 374.2 684.3ZM374.2 680.6L374.2 680.6Q375.5 680.6 376.3 679.9Q377.1 679.2 377.5 678.0Q377.9 676.8 377.9 675.3L377.9 675.3Q377.9 673.8 377.5 672.6Q377.1 671.4 376.3 670.7Q375.5 670.0 374.2 670.0L374.2 670.0Q373.0 670.0 372.2 670.7Q371.4 671.4 371.0 672.6Q370.6 673.8 370.6 675.3L370.6 675.3Q370.6 676.8 371.0 678.0Q371.4 679.2 372.2 679.9Q373.0 680.6 374.2 680.6ZM387.2 680.8L391.2 680.8L391.1 682.1Q391.0 683.6 390.6 685.1Q390.1 686.6 389.7 687.8Q389.2 689.0 389.0 689.7L389.0 689.7L385.8 689.7Q386.0 689.0 386.3 687.8Q386.6 686.6 386.9 685.1Q387.1 683.6 387.2 682.1L387.2 682.1L387.2 680.8Z M413.2 684L408.4 684L401.8 660.7L407.1 660.7L411.0 676.9L411.2 676.9L415.4 660.7L420.0 660.7L424.3 676.9L424.5 676.9L428.3 660.7L433.7 660.7L427.0 684L422.3 684L417.8 668.8L417.6 668.8L413.2 684ZM442.2 684.3L442.2 684.3Q439.6 684.3 437.7 683.2Q435.7 682.1 434.7 680.1Q433.6 678.0 433.6 675.3L433.6 675.3Q433.6 672.6 434.7 670.6Q435.7 668.6 437.7 667.4Q439.6 666.3 442.2 666.3L442.2 666.3Q444.9 666.3 446.8 667.4Q448.7 668.6 449.8 670.6Q450.8 672.6 450.8 675.3L450.8 675.3Q450.8 678.0 449.8 680.1Q448.7 682.1 446.8 683.2Q444.9 684.3 442.2 684.3ZM442.3 680.6L442.3 680.6Q443.5 680.6 444.3 679.9Q445.1 679.2 445.5 678.0Q445.9 676.8 445.9 675.3L445.9 675.3Q445.9 673.8 445.5 672.6Q445.1 671.4 444.3 670.7Q443.5 670.0 442.3 670.0L442.3 670.0Q441.0 670.0 440.2 670.7Q439.4 671.4 439.0 672.6Q438.6 673.8 438.6 675.3L438.6 675.3Q438.6 676.8 439.0 678.0Q439.4 679.2 440.2 679.9Q441.0 680.6 442.3 680.6ZM458.8 684L454.0 684L454.0 666.5L458.7 666.5L458.7 669.6L458.9 669.6Q459.3 668.0 460.5 667.1Q461.6 666.3 463.1 666.3L463.1 666.3Q463.4 666.3 463.8 666.3Q464.3 666.4 464.6 666.5L464.6 666.5L464.6 670.8Q464.2 670.7 463.6 670.6Q463.0 670.5 462.5 670.5L462.5 670.5Q461.5 670.5 460.6 671.0Q459.8 671.4 459.3 672.2Q458.8 673.1 458.8 674.1L458.8 674.1L458.8 684ZM467.1 660.7L471.9 660.7L471.9 684L467.1 684L467.1 660.7ZM482.2 684.3L482.2 684.3Q480.2 684.3 478.6 683.3Q477 682.2 476.1 680.2Q475.1 678.2 475.1 675.3L475.1 675.3Q475.1 672.3 476.1 670.3Q477.1 668.3 478.7 667.3Q480.3 666.3 482.2 666.3L482.2 666.3Q483.7 666.3 484.6 666.8Q485.6 667.3 486.2 668.0Q486.8 668.8 487.2 669.5L487.2 669.5L487.3 669.5L487.3 660.7L492.1 660.7L492.1 684L487.4 684L487.4 681.2L487.2 681.2Q486.8 681.9 486.2 682.6Q485.6 683.4 484.6 683.8Q483.6 684.3 482.2 684.3ZM483.7 680.4L483.7 680.4Q484.9 680.4 485.7 679.8Q486.5 679.1 487.0 678.0Q487.4 676.8 487.4 675.3L487.4 675.3Q487.4 673.7 487.0 672.6Q486.5 671.4 485.7 670.8Q484.9 670.2 483.7 670.2L483.7 670.2Q482.5 670.2 481.7 670.8Q480.9 671.5 480.5 672.6Q480.1 673.8 480.1 675.3L480.1 675.3Q480.1 676.8 480.5 678.0Q480.9 679.1 481.7 679.8Q482.5 680.4 483.7 680.4Z "></path></svg>

Actual (browser render) CleanShot 2024-07-22 at 09 51 10@2x

As is: CleanShot 2024-07-22 at 09 51 35@2x

ducan-ne commented 1 month ago

npm:canvas seems like already supported this

import fs from 'node:fs'
import { createCanvas, loadImage } from 'canvas'

const canvas = createCanvas(1080, 1080)
const ctx = canvas.getContext('2d')

// Draw cat with lime helmet
loadImage('scripts/test-svg.svg').then((image) => {
  ctx.drawImage(image, 0, 0)

  fs.writeFileSync('scripts/test-svg.png', canvas.toBuffer('image/png'))
})
nrkn commented 1 month ago

Same here. I also get this in the console:

cannot append child nodes to this element.
can't render image: load image failed