JavaScript - モバイルに画像をアップロードするにはどうすればよいですか? 、アップロードする前に画像を特定のサイズに圧縮しますか？

携帯電話に写真をアップロードするには? 、アップロードする前に画像を特定のサイズに圧縮しますか？

返信内容:

携帯電話に写真をアップロードするには? 、アップロードする前に画像を特定のサイズに圧縮しますか？

1. 非同期アップロードの場合でも、ファイルを直接アップロードする方法を使用したい場合は、HTML5 を使用できます FormData 具体的な操作については、このブログを参照してください。 http://www.cnblogs.com/lhb25/...

2. 写真を非同期でアップロードする別の方法があります。まず画像を Base64 文字列に変換し、次にその Base64 文字列をサーバーに送信すると、特定の API を使用して Base64 文字列を画像コンテンツに変換できます。具体的な実装方法は以下の通りです

リーリー

getObjectURL メソッドは、受信入力内の画像ファイル オブジェクトを一時 URL に変換するために使用されます。この URL は同じドメインのものです。

リーリー

converImgTobase64 メソッドは、上で取得した URL を渡し、canvasAPI を通じて Base64 文字列に変換します。この URL は同じドメイン内にある必要があり、ドメインを越えることはできないので、converImgTobase64方法就是将上面所得到的url传入，通过canvasAPI转换成base64字符串，注意这个url必须是同域的，不可跨域，所以getObjectURLこのメソッドは非常に便利です。必要 。

例:

リーリー

コンポーネントのこの部分のコードは私の util ライブラリの 1 つにあります。参照して修正の提案を提供してください~~~https://github.com/zero-mo/Br...

また、画像圧縮については、canvasに基づいた操作がここにありますので、試してみてください。
http://www.cnblogs.com/xiao-y...

以下は私の以前の回答からの引用です

IE との互換性を考慮しない場合は、FileReader API を使用してファイルを読み取り、ファイルの Base64 値を取得できます。 IE 可以用 FileReader API 读取文件 获得文件的 Base64 值
img 标签 可以直接用 Base64img タグを使用できます。Base64 を直接使用して画像を表示できます。その後、いくつかのプラグインを使用して画像を切り抜き、サーバーにアップロードして保存できます

FileReader API リファレンス ドキュメント: https://developer.mozilla.org...

jQuery トリミング画像プラグイン (モバイルをサポート): http://www. jq22 .com/jquery-in…FileReader API 参考文档： https://developer.mozilla.org...
jQuery 剪裁图片插件(支持移动端)：

圧縮に関しては、トリミングされた画像のサイズは当然元の画像よりも大幅に小さくなります

元の質問アドレス: https://segmentfault.com/q/10...

私が今書いた記事:

https://segmentfault.com/a/11...
主にネイティブ HTML5 ファイル フォーム選択を使用し、次にプラグインを使用してそれを圧縮し、最後に FormData を使用して直接アップロードします。プラグインによる出力。