Automattic / Automattic/node-canvas
Style tags not respected
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.2k
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
## Issue or Feature
- [x] If this is an issue with installation, I have read the [troubleshooting guide](https://github.com/Automattic/node-canvas/issues/1511).
I'm trying to convert an svg to jpeg and some of the styles are getting stripped off for some reason. Could this be due to Cairo only supporting svg 1.1? https://cairosvg.org/documentation/
## Steps to Reproduce
Here is the svg that renders correctly in the browser being gray, but after the image conversion it goes back to the default blue styles.
```
```
And here is the essence of my code:
```js
const svgBuffer = svg instanceof Buffer ? svg : Buffer.from(svg);
const canvas = createCanvas(3000, 2000);
const canvasContext = canvas.getContext('2d');
// canvasContext.fillStyle = 'white';
// canvasContext.fillRect(0, 0, canvas.width, canvas.height);
await loadImage(svgBuffer).then((image) => {
canvasContext.drawImage(image, 0, 0);
});
const imageOutput = canvas.toBuffer('image/jpeg');
return imageOutput;
};
```
## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): npm canvas@2.11.2
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): node v14.20.0 MacOS 12.6
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the SVG-to-JPEG conversion with the SVG included in the issue and compare it with the browser rendering. Trace how the embedded style tags are handled during conversion; done means the converted JPEG preserves the styles shown in the browser.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100