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

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...

canvasjsdomdrawimage


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions