[B! canvas][dataURL] okyawaのブックマーク

okyawa id:okyawa

canvasとdataURLに関するokyawaのブックマーク (2)

大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。それが・・・スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまうというものです。つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
okyawa 2021/12/08
javascript

リサイズ

canvas

file api

img

laravel

php

blob

画像

dataURL
リンク
[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 Canvasの内容をサーバへ送信する実行例ソース HTML JavaScript PHP 解説 Canvasを画像として取り出すサーバへ送信するサーバでバイナリとして保存する参考ページ Canvasの内容をサーバへ送信する実行例以下から実際のサンプルをお試しいただけます。 miku3.net 左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが
okyawa 2021/12/08
canvas

file api

dataURL

image

php

画像

変換

formData

blob

DataURI
リンク
1