canvas

JavaScript

【有料】Canvasタグに表示されている画像をPHPでサーバに保存する。

やりたいことHTMLのCanvasタグに表示されている画像をPHPでサーバに送信してサーバに保存します。懐かしのお絵描き掲示板の実装などにどうぞ。実装クライアント（Javascript）側Javascript側では以下のように実装します。HTMLにはIDが”test_canvas”のcanvasタグがある前提です。送信先はupload.phpです。const canvas = document.getElementById("test_canvas")let msg_body = { acceptImage: canvas.toDataURL("image/png")}fetch('uploa...
2025.04.29
JavaScript
JavaScript

【対策コードあり】ローカルファイルをCanvasに表示する

やりたいことローカルの画像ファイルをHTMLのCanvasに表示します。検索するといくつか引っかかるのですが、試してみたところ動作しませんでした。（エラーなどは出力されずCanvasになにも表示されませんでした。）環境Chrome：131.0.6778.86試したコードHTML<input type="file" id="file" accept="image/png, image/jpeg"></div><canvas id="canvas"></canvas>JavaScriptdocument.getElementById("file").onchange = (event) => { ...
2024.11.27
JavaScript
JavaScript

canvasタグのサイズ設定方法と動作の違い(JavaScript)

やりたいことcanvasタグは2つの方法でサイズを指定でき見た目は同じが、JavaScriptで扱う際に動作が異なるので確認します。環境Chrome：　113.0.5672.127Canvasのサイズ設定方法CanvasのサイズはattributeとStyleで設定できます。下のように表示の結果は同様です。attribute(canvasタグ内)での設定<canvas width=200 height=200></canvas>上記のhtmlで200x200のCanvasが下のように描画できます。(領域がわかりやすいように背景を灰色にしています。)Styleでの設定<canvas style=...
2023.05.20
JavaScript