質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2053閲覧

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

Kwinter

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/10/29 05:30

前提・実現したいこと

前提として、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})]))
の部分でクリップボードにコピーを行っているのですが、サーバ上だと動作しないみたいなことがあるのでしょうか。
わかる方がいましたらご教授いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2021/10/29 05:48

ブラウザの開発者ツールのコンソールに何かエラーが出ていますか?
Kwinter

2021/10/29 05:52

コメントありがとうございます。 Uncaught TypeError: Cannot read properties of undefined (reading 'write') というエラーが出ています。
guest

回答1

0

Uncaught TypeError: Cannot read properties of undefined (reading 'write')

仕様書によると navigator.clipboard には SecureContext 属性が付いていて、つまり http:// のページでは利用できません。https:// や file:// では使えます。

投稿2021/10/29 06:24

int32_t

総合スコア20670

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問