Automattic/node-canvas

drwaImage with scale or crop render very blur when export pdf file

Open

#1.822 geöffnet am 3. Juni 2021

Auf GitHub ansehen
 (4 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (1.140 Forks)batch import
BugGood first issueHelp wanted

Repository-Metriken

Stars
 (9.524 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 34T 18h) (2 gemergte PRs in 30 T)

Beschreibung

drwaImage with scale or crop render very blur.

Here is result PDF

This is preview with 200%:

preview with 200%

I wite a demo for show my problem for export PDF.

const exportPdf = async () => {
  const { createCanvas, loadImage } = require('canvas');
  const fs = require('fs');
  const path = require('path')
  let canvasWidth = 200;
  let canvasHeight = 200;
  const canvas = createCanvas(canvasWidth, canvasHeight, 'pdf');
  const ctx = canvas.getContext('2d');
  // image is a 800 x 800 px png 
  const imgUrl = "http://capcium.com/wp-content/themes/capcium/dist/images/-placeholders/img-example-square.png" 
  let img = await loadImage(imgUrl);
  const padding = 100;

  ctx.scale(0.1, 0.1)
  // draw origin image
  ctx.drawImage(img, padding, padding);
  // draw image with scale
  ctx.drawImage(img, img.width + padding * 2, padding, img.width - 1, img.height - 1);
  // draw image with crop
  ctx.drawImage(img, 0, 0, img.width - 1, img.height - 1, padding, img.height + padding * 2, img.width, img.height);
  
  const outPath = path.join(__dirname, `./output_${+new Date()}.pdf`)
  canvas.createPDFStream().pipe(fs.createWriteStream(outPath));
  console.log('end')
}

exportPdf()

Contributor Guide