Automattic / node-canvas

Node canvas is a Cairo backed Canvas implementation for NodeJS.
10.19k stars 1.17k forks source link

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

Open saberjsd opened 3 years ago

saberjsd commented 3 years ago

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()
saberjsd commented 3 years ago

It's not very clear when you zoom in. Because draw image with scale or crop, node-canvas will create a temporary canvas to draw on and then draw onto the PDF canvas. The code about this is in CanvasRenderingContext2d.cc needsExtraSurface of line 1300. Only when drawing the original image, is the complete image.

saberjsd commented 3 years ago

Who can help me, please

saberjsd commented 3 years ago

@tj @LinusU @zbjornson @TooTallNate @asturur Hello, contributors! Who can help me, please!

thedang commented 2 years ago

Hi @saberjsd, do you have solution for issue ?