Canvasの画像をサーバ上でもクリップボードにコピーしたい

前提・実現したいこと

前提として、Canvasを使って画像の作成および画像の貼り付けを行うシステムを作成しています。
現在はそのシステムをサーバ上にあげて動作させているのですが、ローカル上だとクリップボードにコピーできていたのですが、サーバ上だとできない状態です。

実現したいこととしては、サーバ上の上でもCanvasで作成した画像をクリップボードにコピーできるようにしたいです。
Canvasに文字を描画するを参考にシステムを作成しました。

発生している問題・エラーメッセージ

ローカル上ではできているが、サーバ上ではクリップボードにコピーができない。

該当のソースコード

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>canvasへの文字描画</title></head>
<body onload="loadImage('preview');">
<p><canvas id="preview"></canvas></p>
<p>
<input type="text" id="canvas_text">
<button onclick="drawText('preview', 'canvas_text');">文字を描く</button>
</p>

<script>
//キャンバスに画像を描画する
function loadImage(id)
{
	//画像を読み込んでImageオブジェクトを作成する
	var image = new Image();
	image.src = '画像のパス';
	image.onload = (function () {
		//画像ロードが完了してからキャンバスの準備をする
		var canvas = document.getElementById(id);
		var ctx = canvas.getContext('2d');
		//キャンバスのサイズを画像サイズに合わせる
		canvas.width = image.width;
		canvas.height = image.height;
		//キャンバスに画像を描画（開始位置0,0）
		ctx.drawImage(image, 0, 0);
		canvas.toBlob(blob=> navigator.clipboard.write([new ClipboardItem({'image/png': blob})]))
	});
}
//キャンバスに文字を描く
function drawText(canvas_id, text_id)
{
	var canvas = document.getElementById(canvas_id);
	var ctx = canvas.getContext('2d');
	var text = document.getElementById(text_id);
	//文字のスタイルを指定
	ctx.font = '32px serif';
	ctx.fillStyle = '#404040';
	//文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
	ctx.textBaseline = 'center';
	ctx.textAlign = 'center';
	//座標を指定して文字を描く（座標は画像の中心に）
	var x = (canvas.width / 2);
	var y = (canvas.height / 2);
	ctx.fillText(text.value, x, y);
	canvas.toBlob(blob=> navigator.clipboard.write([new ClipboardItem({'image/png': blob})]))
}
</script>
</body>
</html>

試したこと

クリップボードにコピーする方法について他にもサイトを見ながら調べました。

補足情報（FW/ツールのバージョンなど）

canvas.toBlob(blob=> navigator.clipboard.write([new ClipboardItem({'image/png': blob})]))
の部分でクリップボードにコピーを行っているのですが、サーバ上だと動作しないみたいなことがあるのでしょうか。
わかる方がいましたらご教授いただければ幸いです。