Node.jsでcanvasを画像化したい

Question

前提・実現したいこと

heroku+Node.jsでWebアプリを作成しています．
フロント(html)の<canvas>を，サーバーサイド(Node.js)側で，toDataURL()で画像化したいです．

当初は，サーバーサイドのNode.jsではなく，レンダリングをするJavaScript(htmlから呼び出し)内でtoDataURL()処理をしようとしていたのですが，canvasにCross Originの画像が描画されている部分があるため，CORSエラーによりtoDataURL()が実行できませんでした(この方と同じエラーです)．
CORSエラーを回避するために，サーバーサイドで処理しようとしています．

ソースコード

<canvas id="canvas"></canvas>
<input type="button" value="get_image" id="get_image">

<script>
var socketio = io();
$(function(){
   $('#get_image').on('click', function() { //NodeへcanvasのDOMを送信
       var canvas = document.getElementById("canvas");
       socketio.emit("get_image", canvas);
   });
});
</script>

const io = require('socket.io')(http);
io.on('connection',function(socket){ 
    socket.on('get_image',function(msg){ //canvasのDOMを受信
        get_image(msg);
    });
});
function get_image(dom){ //canvasをデータURIに変換
    var canvas = dom.toDataURL("image/png");
    console.log(canvas);
}

発生しているエラー

var canvas = dom.toDataURL("image/png");
                 ^
TypeError: dom.toDataURL is not a function

このエラーについて，どのような原因が考えられるでしょうか？
ご教授お願いいたします．

追記

詳しい内容を捕捉します．　2021/5/25 8:15

画像は，gyazoという画像共有サービスのURLから呼び出しています．
呼び出しているURLは，https://i.gyazo.com/???.png のようなものです．

vis.jsを利用してcanvasに描画したネットワーク図のノードに，gyazoの画像を設定しています．
このような感じです↓(画像はvis.js公式ドキュメントより引用)

しかし，このcanvasをtoDataURL()をすると，

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

というエラーがでています．

Comments

[hoshi-takanori]

「canvasのDOMを送信」なんてことはできないと思いますが…。
とりあえず CORS エラーを回避するには、問題の画像を Node.js で proxy すれば良いのでは。

[mi_ho]

「canvasのDOMを送信」はできないんですね．ありがとうございます！

画像はgyazoという画像共有サービスのURLから呼び出していて，canvasへの描画はできています．
しかし，toDataURL()をすると，

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

というエラーがでるという状況です．

「問題の画像を Node.js で proxy 」とは，gyazoのURLをNodeに送信して，なにか処理をするということでしょうか？

[hoshi-takanori]

heroku のアプリが example.com だとして、それ以外のサイトから取ってきた画像を canvas に表示するとそうなるようですが、例えば https://example.com/get_image?url=https://i.gyazo.com/???.png というリクエストがあったら node.js で https://i.gyazo.com/???.png を取得してそのまま返すようにすれば、ブラウザから見たら同じサイトから撮ってきた画像に見えるってことです。(gyazo の規約的にやっていいかどうかは知りませんが…。)

[mi_ho]

hoshi-takanoriさん，詳しく書いていただきありがとうございます！
質問文に捕捉を追記しました．
canvasに描画しているgyazoのURLは，https://i.gyazo.com/???.png です．
詳しく書くと，vis.jsを利用してcanvasに描画したネットワーク図のノードに，gyazoの画像を設定しています(質問文に画像を追記しています)．
URLはhttps://i.gyazo.com/???.pngなので，CORSは問題ないかと思っていたのですが，なぜかtoDataURL()のみできない状況です…．

Answer 1

こんな感じでいかがでしょうか。canvas1 は外部の画像に直接アクセスしてるのでエラーになりますが、canvas2 は node.js サーバー経由で画像にアクセスするので、toDataURL が成功するはず。

node.js サーバー (express と node-fetch が必要です。)

const express = require('express');
const fetch = require('node-fetch');

const app = express();
app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.sendFile('index.html', { root: __dirname });
});

app.get("/get_image", async (req, res, next) => {
  try {
    const r = await fetch(req.query.url);
    const buffer = await r.buffer();
    res.set('Content-Type', r.headers.get('content-type'));
    res.status(r.status).send(buffer);
  } catch (err) {
    next(err);
  }
});

app.listen(3000);

index.html

<canvas id="canvas1"></canvas>
<button onClick="convert('canvas1')">Convert 1</button>

<canvas id="canvas2"></canvas>
<button onClick="convert('canvas2')">Convert 2</button>

<script>
window.onload = () => {
  const url = 'https://i.gyazo.com/???.png'; // 実際の画像 URL を指定してください。
  load_image('canvas1', url);
  load_image('canvas2', '/get_image?url=' + url);
};

function load_image(id, url) {
  const canvas = document.getElementById(id);
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
  };
  img.src = url;
}

function convert(id) {
  const canvas = document.getElementById(id);
  console.log(canvas.toDataURL());
}
</script>

Comments

[mi_ho]

hoshi-takanoriさん，ご回答ありがとうございます！
この方法で試したところ，画像化できました！
勉強になりました！ベストアンサーつけさせていただきます！