Automattic / Automattic/node-canvas

Seeing different results of .toDataURL() in Windows vs Node Alpine environments

Open
#2,224 0 comments 0 reactions 0 assignees View on GitHub
Bug
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

## Issue or Feature
Issue with using .toDataURL()

I am trying to use node-canvas to display text as an image within a pdf. I am using other images within pdfmake that display fine but the images I am creating from canvas using .toDataURL() show up as a line boxes within my PDF (only when running on Node Alpine) and I was wondering if it is something that I did wrong during the canvas generation.

When I run the function on my machine (windows - Node v16) the pdf comes out fine and I can see the canvas images and read their text. When I build the code to a Docker image (Node-alpine:3.12) and push it to the live server then the pdf comes through with only the canvas images as a line of boxes and the rest as their usual image. I can't figure out if it is my code or my Dockerfile preventing this from working in the Node Alpine environment.

## Steps to Reproduce

I am using a function to create 3 different images. To paraphrase with real variable names removed it looks like this.
```js
const generateImage= function (details, type) {
let imageData = null
switch (type) {
case 'line1':
imageData = details.string1+ details.string2
break
case 'line2':
imageData = details.string3
break
case 'line3':
imageData = detailsetails.string4 + details.string5
break
}

const imageCanvas = createCanvas(200, 20)
const imageCanvasContext = imageCanvas.getContext('2d')

imageCanvasContext.font = '12px Arial'
imageCanvasContext.textAlign = 'left'
imageCanvasContext.fillText(imageData, 0, 12)
imageCanvas.width = imageCanvasContext.measureText(imageData).width

imageCanvasContext.font = '12px Arial'
imageCanvasContext.textAlign = 'left'
imageCanvasContext.fillText(imageData, 0, 12)

return imageCanvas
}

const line1Canvas = generateImage(data, 'line1')
const line1Image= line1Canvas.toDataURL()
const line2Canvas = generateImage(data, 'line2')
const line2Image= line2Canvas.toDataURL()
// etc... continued for other lines
```
Dockerfile (paraphrased) contains the following lines
```
RUN apk add --no-cache \
alpine-sdk \
python3 \
cairo-dev \
pango-dev \
libpng-dev \
&& npm install
RUN apk add --no-cache \
cairo \
pango \
libpng \
&& npm install canvas --build-from-source
```

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`):
Canvas 2.11.0

* Environment (e.g. node 4.2.0 on Mac OS X 10.8):
Local Machine Windows 10 Node v16 (no issues running the local server)
Live server Node Alpine:3.12 (Does not work on this server)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.