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)
MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...
任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...
コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...
1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...
1. 心の旅最近コックピットを書いていたときに、背景画像を単純に特定の角度に回転させるという問題につ...
この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...
目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...
この記事では、ビデオタグを使用してビデオ再生を実装するVueの具体的なコードを参考までに共有します。...
目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...
最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...
昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色...
目次定義2. 使用シナリオ3. 例を挙げる4. コーディング定義オブザーバー パターンは 1 対多の...
1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...
序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...
今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...