HTML5 Canvas画像のエクスポートとサーバー機能のアップロード

HTML5 Canvas 画像をエクスポートしてサーバーにアップロードする

最近のプロジェクトでは、パズルや画像編集など、キャンバスに絵を描く必要に遭遇することがよくあります。 Canvas で処理された画像には保存が必要です。

したがって、次の方法が必要になる可能性があります~

1. toDataURL() メソッドを使用して、キャンバス イメージをエクスポートし、base64 データを取得します。

2. Base64 データを BLOB オブジェクトにカプセル化する

3. FormData を組み立てる

4.ajaxアップロード

もちろん、アップロード処理には、同意フィールドなどのクロスドメインの設定など、サーバー側の協力が必要です。 。 。

簡単なデモ:

 function handleSave () { //画像データを Base64 形式でエクスポートします var mycanvas = document.getElementById(mycanvas) var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); // BLOB オブジェクトをカプセル化します var blob = dataURItoBlob(base64Data); //フォームデータを組み立てます var fd = new FormData(); blob); //fileData はカスタマイズされます fd.append(fileName, 123jpg); //fileName は要件に応じてランダムに生成またはハードコードされます //ajax アップロード、ajax の形式は任意ですJQ の書き込みには問題ありません。 //クロスドメインリクエストを許可するようにサーバーを設定する必要があることに注意してください。データの受信方法は、 <input type=file/>var xmlHttp = new XMLHttpRequest(); xmlHttp.open(POST, アップロード リクエストを送信した URL); によってアップロードされたファイルと変わりません。 localStorage.token);// リクエスト ヘッダーを設定します。必要に応じて設定します。 xmlHttp.send(fd); // ajax コールバック xmlHttp.onreadystatechange = () => { // 関数 dataURItoBlob }; (base64Data) { var byteString; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(') ,')[1]); var mimeString = Base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i) } 新しい Blob([ia], {type: mimeString});};

 function b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0; while (i < img.length) { img_buffer.push(img. charCodeAt(i)); } 新しい Uint8Array(img_buffer);} を返します。 b64Image = Canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(image, new Blob([ u8Image ], {type: image/jpg}) );var xhr = 新しい XMLHttpRequest();xhr.open(POST, /api/upload, true);xhr.send(formData);

上記の方法を使用すると、フロントエンドで js を通じて処理され、サーバー側で追加の処理は必要ありません。

最も便利で直接的な方法だと思いますが、ハイライクな返信が多く、サーバー側での様々な処理が必要となるため、お勧めできません。

Canvas Base64 でエンコードされた画像を Uint8Array Blob に変換する必要がありました。

参考: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

上記は、編集者が紹介した HTML5 Canvas 画像をエクスポートしてサーバーにアップロードする機能です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！

この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明示してください。ありがとうございます。