1. ファイルをインポートする<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> 2. HTMLページ<button onclick="packageImages()">zip をダウンロード</button><span id="status"></span> 3. メインコード関数packageImages() { $('#status').text('処理中...') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg //アップロード/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg (var i = 0; i < 1; i++) の場合 { 画像アップロード } var imgBase64 = [] //base64 画像 var imageSuffix = [] //画像サフィックス var zip = new JSZip() zip.file('readme.txt', 'ケースの詳細\n') var img = zip.folder('画像') (var i = 0; i < imgsSrc.length; i++) { var サフィックス = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.')) imageSuffix.push(サフィックス) getBase64(imgsSrc[i]).then( 関数 (base64) { コンソール.log(base64) imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, "")) // すべての画像がbase64に変換されたら、画像圧縮を実行します。if (imgsSrc.length == imgBase64.length) { (var i = 0; i < imgsSrc.length; i++) { // ファイル名データ img.file(i + imageSuffix[i], imgBase64[i], { base64: 真、 }) } zip.generateAsync({ タイプ: 'blob' }).then(関数(コンテンツ) { コンソール.log(1) // FileSaver.js を参照 saveAs(コンテンツ、'images.zip') $('#status').text('処理が完了しました...') }) } }, 関数 (エラー) { console.log(err) //例外情報を出力します} ) } } // 画像パスを渡し、base64 を返す 関数 getBase64(img) { 関数 getBase64Image(画像, 幅, 高さ) { //幅と高さを呼び出すときは、サイズを制御するために特定のピクセル値を渡します。渡されない場合は、デフォルトの画像サイズが使用されます var canvas = document.createElement('canvas') canvas.width = 幅 ? 幅 : img.width canvas.height = height ? height : img.height var ctx = キャンバス.getContext('2d') ctx.drawImage(画像, 0, 0, キャンバス.幅, キャンバス.高さ) var dataURL = canvas.toDataURL() データURLを返す } var image = 新しい画像() image.crossOrigin = '匿名' 画像.src = 画像 var 延期 = $.Deferred() もし(画像){ image.onload = 関数(){ deferred.resolve(getBase64Image(image)) // アップロード処理のために base64 を done に渡す} return deferred.promise() //問題は、onloadが完了した後にsessionStorage['imgTest']を返すことです } } 4. 画像をbase64に変換するプロセスを最適化し、zipパッケージの速度を向上させる関数packageImages() { $('#status').text('処理中...') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg //アップロード/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg (var i = 0; i < 1; i++) の場合 { 画像アップロード } var imgBase64 = [] //base64 画像 var imageSuffix = [] //画像サフィックス var zip = new JSZip() zip.file('readme.txt', 'ケースの詳細\n') var img = zip.folder('画像') (var i = 0; i < imgsSrc.length; i++) { var サフィックス = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.')) imageSuffix.push(サフィックス) getBase64(imgsSrc[i], 関数(base64) { imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, "")) imgsSrc.length == imgBase64.length の場合 { (var i = 0; i < imgsSrc.length; i++) { // ファイル名データ img.file(i + imageSuffix[i], imgBase64[i], { base64: 真、 }) } zip.generateAsync({ タイプ: 'blob' }).then(関数(コンテンツ) { コンソール.log(1) // FileSaver.js を参照 saveAs(コンテンツ、'images.zip') $('#status').text('処理が完了しました...') }) } }) } } 関数 getBase64(img, コールバック) { fetch(画像).then( res => res.blob()) .then(res => { fr = new FileReader(); //https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader fr.onload = 関数 (e) { コールバック(e.target.result) }; fr.onerror = 関数(){ console.log('読み取りエラー!') }; fr.readAsDataURL(res); //テキスト変換の場合、2番目のパラメータはエンコードを使用できます}) } 5. 再度最適化し、axiosを介して画像をbase64に変換する関数packageImages() { $('#status').text('処理中...') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg //アップロード/2022/web/u=2151136234,3513236673&fm=26&gp=0.jpg (var i = 0; i < 100; i++) の場合 { 画像アップロード } ハンドルバッチダウンロード(imgsSrc) } getFile = (url) => { 新しい Promise を返します ((resolve, reject) => { アクシオス({ メソッド: 'get'、 URL、 レスポンスタイプ: 'arraybuffer' })。次に、データ => { 解決(データ.データ) }).catch(エラー => { 拒否(error.toString()) }) }) }; // バッチダウンロード handleBatchDownload = async (selectImgList) => { const データ = selectImgList; const zip = 新しい JSZip() const プロミス = [] data.forEach((item, idx) => {を待つ // コンソール.log(アイテム、idx) const promise = this.getFile(item).then(async (data) => { // ファイルをダウンロードし、ArrayBuffer オブジェクトとして保存します。const arr_name = item.split("/"); let file_name = arr_name[arr_name.length - 1] // ファイル名を取得する // if (file_name.indexOf('.png') == -1) { // ファイル名 = ファイル名 + '.png' // } zip.file(idx + '.png', データ, {を待つ バイナリ: true }) // ファイルを一つずつ追加します }) promises.push(プロミス) }) Promise.all(promises).then(() => { zip.generateAsync({ タイプ: "blob" }).then(content => { // バイナリ ストリームを生成 saveAs(content, "photo.zip") // ファイル セーバーを使用してファイルを保存します $('#status').text('処理が完了しました....') }) }) }; 上記は、js を使用して複数の画像を zip にパックする方法の詳細です。js 画像を zip にパックする方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux CentOS 7.4 で mysql5.7.20 のパスワードを変更する方法
>>: Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)
お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...
テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...
1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...
Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...
最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...
1. Dockerはローカルイメージをインポートする場合によっては、イメージをローカルまたは別の友人...
目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...
参考までに、mysql 5.7.20 / 5.7.21 をダウンロード、インストール、構成します。具...
MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....
<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...
序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...
デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します...
前の記事では、And キーワードを使用した MySql の複数条件クエリ ステートメントを紹介しまし...