JS と Canvas は画像のプレビュー、圧縮、アップロード機能を実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS と Canvas は画像のプレビュー、圧縮、アップロード機能を実装します

亚连

May 28, 2018 am 10:30 AM

canvas javascript 圧縮

この記事では主に、画像のプレビュー、圧縮、アップロード機能を実装するための JS と Canvas を紹介します。この機能を実装するには、最初のステップはユーザーがアップロードする必要がある画像を選択することです。画像リソースを取得するには、プレビューを圧縮してアップロードします。具体的な実装コードはこちらの記事を参照してください

まずはショックを和らげるためにレンダリングを見てみましょう

ステップ 1: ユーザーが画像を選択しますアップロードする

<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">

画像を選択したら、この機能を使用して画像リソースを取得し、圧縮して、サーバーにアップロードする必要があります。 ajax または他の方法を使用してアップロードすることもできます。

ステップ 2: 画像リソースの圧縮プレビューを取得してアップロードします

function upload() { 
  let file = document.querySelector(&#39;input[type=file]&#39;).files[0] // 获取选择的文件，这里是图片类型 
  let reader = new FileReader() 
    reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 
    reader.onload = function(e) { // 文件读取完成时触发  
      let result = e.target.result // base64格式图片地址  
      var image = new Image() image.src = result // 设置image的地址为base64的地址  
      image.onload = function(){  
        var canvas = document.querySelector("#canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设置canvas的画布宽度为图片宽度  
        canvas.height = image.height;  
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片  
        let dataUrl = canvas.toDataURL(&#39;image/jpeg&#39;, 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量  
                                  // dataUrl 为压缩后的图片资源，可将其上传到服务器  
      }  
    } 
 }

次に、画像が正常に圧縮されているかどうかを比較してみましょう:

元の画像サイズ:

圧縮率は 0.92 に設定されています:

圧縮率の設定は0.52です

ズーム率を0.92に設定すると、元の画像より画像が大きくなるのは一見すると不思議だと思いませんか？実際、base64 でエンコードされた画像は、特定の理由により元の画像よりも大きくなります。base64 のエンコード原理を確認できます。画像の圧縮に成功したようです。

注: キャンバスは IE9 より下ではサポートされていません。応答速度に影響するため、大きな画像には Base64 を使用しないでください。

上記は私があなたのためにまとめたものです。

JavaScript は生年月日の正規表現をステップごとに実装します

Vue を使用して動的に更新される Echarts コンポーネントを開発する詳細なチュートリアル

で selectpicker ドロップダウンボックスを使用する方法の例ブートストラップ

以上がJS と Canvas は画像のプレビュー、圧縮、アップロード機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Laravel チュートリアル

1604

PHP チュートリアル

1510

276

Related knowledge

7-zipの最大圧縮率設定、7zipを最小まで圧縮する方法 Jun 18, 2024 pm 06:12 PM

ダウンロード Web サイトからダウンロードした圧縮パッケージは、解凍後に元の圧縮パッケージよりも大きくなり、クラウドディスクにアップロードすると、小さいものでは数十 MB の差が生じることがわかりました。有料のスペースは、ファイルが小さい場合は問題ありませんが、ファイルが多数ある場合、ストレージのコストが大幅に増加します。私はそれを具体的に勉強したので、必要に応じてそこから学ぶことができます。圧縮レベル: 9-極度の圧縮辞書サイズ: 256 または 384、辞書が圧縮されるほど遅くなります。256MB より前では圧縮率に大きな違いがあり、384MB 以降では圧縮率に違いはありません。最大 273 パラメータ: f=BCJ2、テストおよび追加パラメータの圧縮率が高くなります

フォルダーを圧縮してwpsで送信する方法 Mar 20, 2024 pm 12:58 PM

オフィスワーカーは仕事で wps ソフトウェアを頻繁に使用します。場合によっては、1 日に複数のファイルを入力し、リーダーまたは指定された場所に送信します。では、wps ソフトウェアはどのようにしてフォルダーを圧縮し、送信用にパッケージ化するのでしょうか? 以下のエディターが説明します。 . この操作ステップ。まず、送信するファイルとフォルダーを同じフォルダーに整理します。ファイルが多数ある場合は、送信時に識別しやすいように、各ファイルに名前を付けることをお勧めします。 2 番目のステップとして、今度はこの大きなフォルダーをクリックして右クリックします。「アーカイブに追加」を選択します。ステップ 3: この時点で、ソフトウェアはファイルのパッケージ化を自動的に支援します。「XX.zip に圧縮」を選択します。この zip はパッケージ化形式であり、「今すぐ圧縮」をクリックします。

キャンバスフレームワークを学び、一般的に使用されるキャンバスフレームワークについて詳しく説明します Jan 17, 2024 am 11:03 AM

Canvas フレームワークを探索する: 一般的に使用される Canvas フレームワークを理解するには、特定のコード例が必要です。はじめに: Canvas は HTML5 で提供される描画 API であり、これを通じて豊富なグラフィックスやアニメーション効果を実現できます。描画の効率と利便性を向上させるために、多くの開発者がさまざまな Canvas フレームワークを開発しました。この記事では、一般的に使用される Canvas フレームワークをいくつか紹介し、読者がこれらのフレームワークの使用方法をより深く理解できるように、具体的なコード例を示します。 1.EaselJSフレームワークEa

ゲーム開発におけるキャンバスの強力な役割と応用を探る Jan 17, 2024 am 11:00 AM

ゲーム開発におけるキャンバスの力と応用を理解する概要: インターネット技術の急速な発展に伴い、Web ゲームはプレイヤーの間でますます人気が高まっています。 Web ゲーム開発の重要な部分として、キャンバステクノロジーがゲーム開発に徐々に登場し、その強力なパワーと応用性を示しています。この記事では、ゲーム開発におけるキャンバスの可能性を紹介し、具体的なコード例を通じてその応用例を示します。 1. Canvas テクノロジの概要 Canvas は HTML5 の新しい要素で、これにより次のことが可能になります。

winrar 64 ビット - winrar を解凍するにはどうすればよいですか? Mar 18, 2024 pm 12:55 PM

WinRAR は、豊富な機能と使いやすいインターフェイスを提供する強力な圧縮ファイル管理ツールです。 WinRAR 64 ビットバージョンは、64 ビットオペレーティングシステム用に特別に最適化されており、システムリソースとパフォーマンスをより効率的に利用できます。次に、編集者が winrar 64 ビットの紹介と winrar の解凍方法を説明します。 1. winrar 64 ビットソフトウェアとは何ですか? WinRAR は、強力な圧縮パッケージマネージャーです。このソフトウェアは、データのバックアップ、電子メールの添付ファイルのサイズの削減、インターネットからダウンロードした RAR、ZIP およびその他のファイルの解凍、RAR および ZIP 形式の新しいファイルの作成に使用できます。 WINRARの最新バージョンはWiです

Linux におけるパッケージ化と圧縮の違いを正しく理解する方法 Feb 20, 2024 pm 05:33 PM

パッケージ化と圧縮は Linux で一般的に使用される操作ですが、多くのユーザーは 2 つの概念を混同する傾向があります。この記事では、Linux システムにおけるパッケージ化と圧縮の違いについて詳しく説明し、読者の理解を助けるために特定のコード例を使用します。まず、梱包と圧縮の違いを明確にする必要があります。パッケージ化とは、複数のファイルまたはディレクトリを 1 つのファイルに組み合わせることであり、ファイルの整理、アーカイブ、または転送によく使用されます。圧縮とは、アルゴリズムを通じて 1 つ以上のファイルを圧縮して、ファイルのサイズを削減し、記憶領域を節約し、または転送を高速化することです。

学習効果の最適化: キャンバス描画スキルを向上させる方法 Jan 17, 2024 am 08:28 AM

Canvas 描画スキルの学習効果を高めるにはどうすればよいですか?現代の Web 開発において、Canvas は非常に重要な描画テクノロジとなっています。 Canvas を通じて、JavaScript と HTML5 が提供する API を使用して、さまざまなグラフィックスやアニメーション効果を実現できます。ただし、キャンバスの描画スキルを学ぶのは、特に初心者にとっては簡単な作業ではありません。この記事では、Canvas の描画スキルを学習する効果を高めるのに役立ついくつかの実践的なヒントを紹介します。 1. 基本を理解する

中国教育分野におけるCanvasの発展動向と将来展望 Jan 17, 2024 am 10:22 AM

科学技術の急速な発展と教育分野における情報技術の広範な応用に伴い、Canvas は世界をリードするオンライン学習管理システムとして、中国の教育業界で徐々に台頭してきています。 Canvas の登場は、中国の教育と指導方法の改革に新たな可能性をもたらします。この記事では、中国の教育分野におけるCanvasの開発傾向と展望について探っていきます。まず第一に、中国の教育分野における Canvas の開発トレンドの 1 つは、徹底した統合です。クラウドコンピューティング、ビッグデータ、人工知能の急速な発展により、Canvas はますます

See all articles

JS と Canvas は画像のプレビュー、圧縮、アップロード機能を実装します

ホットAIツール

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック