Automattic/node-canvas

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

Open

#1822 aperta il 3 giu 2021

Vedi su GitHub
 (4 commenti) (0 reazioni) (0 assegnatari)JavaScript (1140 fork)batch import
BugGood first issueHelp wanted

Metriche repository

Star
 (9524 star)
Metriche merge PR
 (Merge medio 47m) (6 PR mergiate in 30 g)

Descrizione

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()

Guida contributor