我有一个代码片段，其中我利用了两个画布。。。
一个是在模拟DOM中生成的，使用JSDOM。。。
另一种是直接使用NPM Canvas
我正在使用heatmap.js在模拟的DOM画布中创建一个图像，并试图将该画布绘制到我的NPM画布对象中。
我将把我的代码片段截断为重要部分。。。
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
想法？
这是它的控制台输出。。。
file:///C:/programming/discordbot/index.js:226
myCtx.drawImage(htmap, 0, 0);
^
TypeError: Image or Canvas expected
为了证明我没有类型冲突，我首先安慰了每个对象的
他们的日志
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] }
我用一个伪图像测试了这个drawImage文件，效果很好，所以它与htmap Canvas元素有关。。。
在代码中，应使用canvas或image调用行/函数myCtx.drawImage(htmap, 0, 0);htmap。目前它是HTMLCanvasElement的一个实例。您可以使用heatmapInstance.getDataURL();来获取热图的画布/图像内容。CCD_ 5提供CCD_。如果需要，您可以解码base64内容。
您可以使用以下行获得png缓冲区：
Buffer.from(heatmapInstance.getDataURL().replace('data:image/png;base64,', ''), 'base64')
我不确定myCtx.drawImage函数需要缓冲区还是二进制格式。如果它需要二进制，那么您可以将该缓冲区转换为二进制。