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)

推薦する

Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...

表には表示したい境界コードが表示されます

テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...

フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。

目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...

一般的でない js 演算演算子の概要

目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...

Linuxのpasswdコマンドの使用

1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...

Centos7 で yum を使用して Mysql5.7.19 をインストールする詳細な手順

Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

Docker でローカルにイメージをインポート/保存/読み込み/削除する方法

1. Dockerはローカルイメージをインポートする場合によっては、イメージをローカルまたは別の友人...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

MySQL 5.7.20\5.7.21 無料インストール版のインストールと設定のチュートリアル

参考までに、mysql 5.7.20 / 5.7.21 をダウンロード、インストール、構成します。具...

Mysql のフィールドのデータの一部をバッチ置換する (推奨)

MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

Alibaba Cloud CentOS7 サーバーの nginx 構成と FAQ の分析

序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...

vue3 のさまざまな構文形式を比較したサンプルコード

デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します...

OR キーワードを使用した MySql 複数条件クエリ ステートメント

前の記事では、And キーワードを使用した MySql の複数条件クエリ ステートメントを紹介しまし...