Automattic/node-canvas

SVG not scaling with context

Open

#1.474 aberto em 24 de set. de 2019

Ver no GitHub
 (4 comments) (0 reactions) (0 assignees)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):

Guia do colaborador

Pilha de tecnologia
javascriptnodejs
Domain
backend
Tipo Issue
bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
half day
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
stale
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Node.jscanvas librarySVG basics
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
40
Direção de pesquisa
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.