HTML5を使用した画像の圧縮とアップロード

今回は HTML5 を使用して画像を圧縮してアップロードする方法を紹介します。 HTML5 を使用して画像を圧縮してアップロードする場合の 注意点 について、実際の事例を見てみましょう。

canvas 圧縮

は、github 上の既製のライブラリを使用します:

https://github.com/sTOMITA/ios-imagefile-megapixel, 私は大神 sTOMITA を崇拝しなければなりません。一般的な考え方は、画像をサンプリングしてキャンバスに表示し、canvas.toDataURL メソッドを使用して Base64 文字列 を取得して圧縮を実現することです。たとえば、input 要素が変更イベントをトリガーした後、内部のファイルを読み取って操作します:

 fileInput = document.getElementById('fileInput'=  file = fileInput.files[0
     mpImg = 
     resImg = document.getElementById('resultImage'

圧縮が完了すると、次のような画像が得られます:

data:image/jpeg この形式は多くのスタイルが使用されており、内部の背景画像は次のとおりです。

ここでの resImg はプレビュー画像であり、プレビューが必要ない場合は、圧縮用の画像 (document.createElement("img")) を作成します。これにより、tagName 属性が 1 つ少なくなります。ソース コードを変更することも、この属性を自分で追加することもできます。ソースコードはタグ名に基づいて判断し、存在しない場合はエラーが報告されます:

 MegaPixImage.prototype.render = function (target, options, callback) {
        //....
        target.tagName = target.tagName || "IMG"; //加上这一句        var tagName = target.tagName.toLowerCase();        if (tagName === 'img') {
            target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
        } else if (tagName === 'canvas') {
            renderImageToCanvas(this.srcImage, target, opt, doSquash);
        }        if (typeof this.onrender === 'function') {            this.onrender(target);
        }        if (callback) {
            callback();
        }        if (this.blob) {            this.blob = null;
            URL.revokeObjectURL(this.srcImage.src);
        }
    };

また、複数の画像が圧縮されている場合は、直接呼び出すことができません。わずかに変形すると、前の画像が含まれなくなります。圧縮が完了したら、次の画像に進みます。

 fileSelected: function () {                    var files = $("#fileImage")[0].files;                    var count = files.length;
                    console.log("共有" + count + "个文件");                    for (var i = 0; i < count; i++) {var item = files[i];
                        console.log("原图片大小", item.size);                        if (item.size > 1024 * 1024 * 2) {
                            console.log("图片大于2M，开始进行压缩...");
                            (function(img) {                                var mpImg = new MegaPixImage(img);                                var resImg = document.createElement("img");
                                resImg.file = img;
                                mpImg.render(resImg, { maxWidth: 500, maxHeight: 500, quality: 1 }, function() {
                                  //do some thing
                                });
                            })(item);
                        } 
                        core.previewImage(item);
                    }
                },

アップロード処理

1.base64文字列を直接投稿します

  uploadBase64str: function (base64Str) {
                    var formdata = new FormData();
                    formdata.append("base64str", base64Str);                    var xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (e) {                        var percentComplete = Math.round(e.loaded * 100 / e.total);
                        para.onProgress(percentComplete.toString() + '%');
                    });
                    xhr.addEventListener("load", function (e) {
                        para.uploadComplete(xhr.responseText);
                    });
                    xhr.addEventListener("error", function (e) {
                        para.uploadError(e);
                    });
                    xhr.open("post", para.base64strUrl, true);                    xhr.send(formdata);
                },

例えば、ここでbase64strUrlは/home/MUploadImgBase64Str、MVC

Controller

方法は以下の通りです:

 [HttpPost]        public ActionResult MUploadImgBase64Str(string base64str)
        {            try
            {                var imgData = base64str.Split(',')[1];                //过滤特殊字符即可   
                string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");                if (dummyData.Length % 4 > 0)
                {
                    dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
                }                byte[] byteArray = Convert.FromBase64String(dummyData);                using (System.IO.MemoryStream ms = new System.IO.MemoryStream(byteArray))
                {                    var img = System.Drawing.Image.FromStream(ms);                    var path = "~/Content/UploadFiles/mobile/";                    var uploadpath = Server.MapPath(path);                    if (!Directory.Exists(uploadpath))
                    {
                        Directory.CreateDirectory(uploadpath);
                    }                    var saveName = uploadpath + “stoneniqiu” + ".jpg";
                    img.Save(saveName);                    return Json(saveName);
                }
            }            catch (Exception e)
            {                return Json(e.Message);
            }
        }

数M枚の画像を数十枚まで圧縮できますもちろん、幅、高さ、品質の設定が小さすぎると、画像は非常に歪んでしまいます。この文字列を取得するにはどうすればよいでしょうか?方法は2つあり、1つはsrcを直接読み取る方法です:

 var base641 = resImg.src;

もう1つはcanvasを使用して変換する方法です:

 function getBase64Image(img) {                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height);                var dataURL = canvas.toDataURL("image/jpeg");                return dataURL;                // return dataURL.replace("data:image/png;base64,", "");            } var base64 = getBase64Image(resImg);

同じ画像に対して、2つで取得される文字列のサイズが異なりますが、違いはわかりません画質的には。

たとえば、2M の画像の場合、getBase64Image メソッドを通じて読み取られる文字列のサイズはわずか 64k ですが、src によって直接読み取られるサイズは 270k であり、それぞれによって生成される画像は小さくなります。オリジナル画像(2.2M)、base64(48k)、src(202k)の対応画像は以下の通りです。

getBase64Image は、キャンバスの toDataURL を通じて小さい Base64 文字列を取得します。

2. フロントエンドで BLOB オブジェクトを変換してからバックエンドにポストすることもできます

 
                 byteString = atob(dataUrl.split(',')[1
 ab =  ia =  ( i = 0; i < byteString.length; i++=  Blob([ab], { type: 'image/jpeg'

3. 圧縮されていない場合は、formdata に直接インストールしてバックエンドに送信します。

   uploadFile: function (file) {
                    console.log("开始上传");                    var formdata = new FormData();
                    formdata.append(para.filebase, file);//这个名字要和mvc后台配合
                    var xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (e) {                        var percentComplete = Math.round(e.loaded * 100 / e.total);
                        para.onProgress(percentComplete.toString() + '%');
                    });
                    xhr.addEventListener("load", function (e) {
                        para.uploadComplete(xhr.responseText);
                    });
                    xhr.addEventListener("error", function (e) {
                        para.uploadError(e);
                    });
                    xhr.open("post", para.url, true);                        xhr.send(formdata);
                },

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 recommended recommended reading：jsの泡立ちとブラウザのデフォルト動作を防ぐ方法

jjsおよびキャンバスコンポジット画像を作成するためのパブリックアカウントのポスターを作成しますjqueryのチェックボックスの使用DataTable プラグインは非同期読み込みを実装できますか?

以上がHTML5を使用した画像の圧縮とアップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。