Node.js Application, leveraging JSDOM and node-canvas, trying to drawImage from one canvas to another

user_14928966 0
Viewed 156

I have a code snippet, where I'm leveraging two canvases...

One is generated in an emulated DOM, using JSDOM...

and the other is directly using NPM-Canvas

I am using heatmap.js to create an image in the emulated DOM canvas, and i'm trying to paint that canvas, into my NPM-canvas object.

I will truncate my code snippet to the important parts...

import { JSDOM } from 'jsdom';
import cnv from 'canvas';
import h337 from './heatmap.js';

//setup destination canvas
const myCanvas = cnv.createCanvas(1200, 1200);
const myCtx = myCanvas.getContext('2d');

//Setup JS-dom for virtual DOM and target Div
export const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p><div id="heatmap" width="1200" height="1200"></div>`, { resources: 'usable' });
const mapDiv = dom.window.document.getElementById('heatmap');
mapDiv.style.width = '1200px';
mapDiv.style.height = '1200px';

//setup heatmap params
var heatmapInstance = h337();
//This creates the canvas element inside the target Div
const hm = heatmapInstance.create({ container: mapDiv });
//reference to the canvas in target Div
const htmap = mapDiv.firstChild;

//truncated code********

//draw data to the heatmap canvas
hm.setData(data);
console.log('heatmap object: ', htmap);
console.log('context object: ', myCtx);
//take the heatmap canvas, htmap, and draw it to other canvas using the context
myCtx.drawImage(htmap, 0, 0);
//*****ERROR HERE

Thoughts?

So here is the console output of that...

file:///C:/programming/discordbot/index.js:226
    myCtx.drawImage(htmap, 0, 0);
          ^

TypeError: Image or Canvas expected

to prove i don't have a type conflict, i consoled out each object first

their logs

heatmap object:  HTMLCanvasElement {
  [Symbol(SameObject caches)]: [Object: null prototype] {
    style: CSSStyleDeclaration {
      '0': 'position',
      '1': 'left',
      '2': 'top',
      _values: [Object],
      _importants: [Object],
      _length: 3,
      _onChange: [Function (anonymous)]
    }
  }
}
context object:  CanvasRenderingContext2D { canvas: [Canvas 1200x1200] }

I've tested this drawImage file with a dummy image and that works fine, so its something to do with the htmap Canvas Element...

jsdom drawimage canvas
1 Answers

In the code - the line/function myCtx.drawImage(htmap, 0, 0); htmap should be called with canvas or image. Currently it is an instance of HTMLCanvasElement. you may use heatmapInstance.getDataURL(); to get the canvas/image content of heatmap. getDataURL provides data:image/png;base64 . You may decode the base64 content if required.

You may get png buffer using below line:

Buffer.from(heatmapInstance.getDataURL().replace('data:image/png;base64,', ''), 'base64')

I am not sure whether myCtx.drawImage function requires buffer or binary format. if it requires binary then you may convert that buffer to binary.

user_36753440
Related