Image unable to load about escposencoder

[chukiatt]

i got this error : 'document is not defined' from encoder. i run on react native android real device
If anyone has a solution, please tell me.

const encoder = new EscPosEncoder();
const canvas = canvasRef.current;
canvas.width = 240;
canvas.height = 241;
let img = new CanvasImage(canvas,240,240);
img.src = 'https://sportshub.cbsistatic.com/i/2021/04/09/9df74632-fde2-421e-bc6f-d4bf631bf8e5/one-piece-trafalgar-law-ano-anime-1246430.jpg';
img.addEventListener('load', () => {
let result = encoder.initialize().image(img, 240, 240, 'atkinson').encode();
});

[NielsLeenheer]

The example for images is intended for use in the browser, where Image is one of the standard classes. With Node you can use node-canvas. Something like this:

const { createCanvas, loadImage } = require('canvas');

loadImage('image.jpg').then((img) => {
  let result = encoder
        .image(img, 300, 300, 'atkinson')
        .encode()
})

[vinothmoorthkumar]

The above example is not working. (TypeError: Image or Canvas expected)
Even i have tried to use canvas and image both are not working

[NielsLeenheer]

This works for me:

let EscPosEncoder = require('esc-pos-encoder');
let Canvas = require('canvas'), Image = Canvas.Image;

let encoder = new EscPosEncoder();

let img = new Image();
img.onload = () => {
    let result = encoder
        .initialize()
        .image(img, 16, 16, 'atkinson')
        .encode();
};

img.src= 'image.jpg';

[Blair2004]

it's throwing the same error

TypeError: Image or Canvas expected
    at EscPosEncoder.image (D:\public_html\ng-nexo-print-server\node_modules\esc-pos-encoder\src\esc-pos-encoder.js:407:17)
    at img.onload (D:\public_html\ng-nexo-print-server\main.js:21:10)
    at Image.src (D:\public_html\ng-nexo-print-server\node_modules\canvas\lib\image.js:30:17)
    at Object.<anonymous> (D:\public_html\ng-nexo-print-server\main.js:38:9)
    at Object.<anonymous> (D:\public_html\ng-nexo-print-server\main.js:117:3)
    at Module._compile (module.js:642:30)
    at Object.Module._extensions..js (module.js:653:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:504:12)
    at Function.Module._load (module.js:496:3)

[NielsLeenheer]

The last example as is works on my machine 😇

In any case, the exception is thrown by node-canvas when the drawImage() function is called on the context of the canvas that is created internally by EscPosEncoder.

The reason you get this error is that the first parameter of the image() function is not a Canvas or Image object. So something is wrong with the way you pass the image into the image() function.

[uzenith360]

I also had the same issue but i fixed it by requiring canvas-browserify instead of canvas. I checked the esc-pos-encoder code, it's using canvas-browserify instead of canvas. This issue seems to be a limitation of native addons (two different builds of node-canvas don't produce compatible objects). Its important to make sure your JS code is using the same node-canvas everywhere.

I hope this fixes the issue for others.😊

[Johnsonzhangc]

This works for me:

let EscPosEncoder = require('esc-pos-encoder');
let Canvas = require('canvas'), Image = Canvas.Image;

let encoder = new EscPosEncoder();

let img = new Image();
img.onload = () => {
    let result = encoder
        .initialize()
        .image(img, 16, 16, 'atkinson')
        .encode();
};

img.src= 'image.jpg';

Hi @NielsLeenheer ,

Seems it's very difficult to get the img object or canvas in React Native. If use your above code, then node-canvas will say "Image() is not a constructor", and if use canvas, then there will be 'document is not defined' from the encoder. Could you make it more clear on how to write the code to work with both node-canvas and your encoder? Thanks,

[TrustyTechSG]

This works for me:

let EscPosEncoder = require('esc-pos-encoder');
let Canvas = require('canvas'), Image = Canvas.Image;

let encoder = new EscPosEncoder();

let img = new Image();
img.onload = () => {
    let result = encoder
        .initialize()
        .image(img, 16, 16, 'atkinson')
        .encode();
};

img.src= 'image.jpg';

Hi @NielsLeenheer ,

Seems it's very difficult to get the img object or canvas in React Native. If use your above code, then node-canvas will say "Image() is not a constructor", and if use canvas, then there will be 'document is not defined' from the encoder. Could you make it more clear on how to write the code to work with both node-canvas and your encoder? Thanks,

I have exactly the same problems, is there any one managed to make it work on react-native? great thanks