js は複数の画像を zip にパッケージ化します

js は複数の画像を zip にパッケージ化します

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • vue-cli3.0 での CSS、JS、画像のパッケージ パスのカスタマイズの詳細な説明
  • BlueShow v1.0 リリース 画像ブラウザ(ライトボックスに類似) blueshow.js パッケージのダウンロード
  • Jsモジュールパッケージのエクスポートの使用法と違いにはインポートが必要
  • vue.config.js パッケージ最適化構成
  • video.js をコンパイルしてパッケージ化する方法を段階的に説明します
  • nuxt.jsは、プロジェクトのパッケージ環境操作を区別するために環境変数を追加します。
  • vue は uglifyjs-webpack-plugin パッケージング エラーの問題を解決します
  • Vue.js をパッケージ化後に容量を圧縮する方法のまとめ(Vue.js はパッケージ化後容量が大きすぎる)
  • Vue パッケージ化後に vendor.js ファイルが大きくなりすぎる問題を解決する

<<:  Linux CentOS 7.4 で mysql5.7.20 のパスワードを変更する方法

>>:  Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

推薦する

MySQLの自動増分主キーIDはこのように処理されません

MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

背景画像のみを180度回転させるCSS3実装例

1. 心の旅最近コックピットを書いていたときに、背景画像を単純に特定の角度に回転させるという問題につ...

jsはシンプルなカウントダウンを実装します

この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...

Vue3のレスポンシブ原則の詳細な説明

目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...

Vueはビデオ再生を実装するためにビデオタグを使用します

この記事では、ビデオタグを使用してビデオ再生を実装するVueの具体的なコードを参考までに共有します。...

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...

CSS: 訪問した疑似クラスセレクタの秘密の記憶

昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色...

js オブザーバーモードの紹介と使用

目次定義2. 使用シナリオ3. 例を挙げる4. コーディング定義オブザーバー パターンは 1 対多の...

Linux でのファイル コンテンツの重複排除と交差と差異の実装

1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

CSS で左上の三角形を作成するいくつかの方法の詳細な説明

今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...