Automattic/node-canvas

SVG not scaling with context

Open

#1 474 ouverte le 24 sept. 2019

Voir sur GitHub
 (4 commentaires) (0 réactions) (0 assignés)JavaScript (9 524 stars) (1 140 forks)batch import
Help wanted

Description

Issue or Feature

I'm not sure if i opened this issue already, or just commented in the old svg resize issue that i cannot find anymore.

In browser canvas SVGs are resized and re rendered with the context scale other than the width and height assigned.

In node canvas rendering a svg on a scaled context gives blurred results.

Steps to Reproduce

const fs = require('fs');
const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d');

ctx.scale(20, 20);

loadImage('http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg').then((image) => {
  ctx.drawImage(image, 100, 100, 400, 400, 0, 0, 500, 500);
  var stream = canvas.createPNGStream();
  stream.pipe(fs.createWriteStream('output.png'));
})

image

Your Environment

  • Version of node-canvas (output of npm list canvas or yarn list canvas):
  • Environment (e.g. node 10.0.0 on Mac OS X 10.8):

Guide contributeur

Stack technique
javascriptnodejs
Domaine
backend
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
half day
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
Node.jscanvas librarySVG basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
40
Direction de recherche
The bug occurs when drawing an SVG image on a scaled canvas context, resulting in a blurred image. To fix this, examine how node canvas handles SVG images in the drawImage function, particularly the interaction with the current transformation matrix. Look at the source files in the src/ directory, such as Canvas.cc and Image.cc. The issue has 4 comments that may contain additional context or debugging attempts. A potential fix could involve ensuring that SVG rasterization takes the current context scale into account before rendering.