HTML5를 사용한 이미지 압축 및 업로드-JS 튜토리얼-php.cn

이번에는 HTML5를 사용하여 이미지를 압축하고 업로드하는 방법을 소개하겠습니다. HTML5를 사용하여 이미지를 압축하고 업로드할 때 주의사항은 무엇인가요?

캔버스 압축

은 github에 미리 만들어진 라이브러리를 사용합니다: https://github.com/stomita/ios-imagefile-megapixel, 위대한 신 stomita를 숭배해야 합니다. 일반적인 아이디어는 이미지를 샘플링하여 캔버스에 표시한 다음 canvas.toDataURL 메서드를 사용하여 base64 문자열을 얻어 압축하는 것입니다. 예를 들어, 입력 요소가 변경 이벤트를 트리거한 후 내부의 파일을 읽고 작동합니다.

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

로그인 후 복사

압축이 완료된 후 다음과 유사한 그림을 얻게 됩니다.

data:image/jpeg 이 형식은 많이 사용되었고, 내부의 배경 이미지는 이렇습니다.

여기에 있는 resImg는 미리보기 이미지로, 미리보기가 필요하지 않지만 압축을 위해 img를 생성하면 됩니다(document.createElement("img")). tagName 속성이 하나 적습니다. 소스 코드를 수정하거나 이 속성을 직접 추가할 수 있습니다. 소스 코드는 tagName을 기준으로 판단합니다.

 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개의 사진 몇 장을 수십 장으로 압축할 수 있습니다. k 또는 수백 킬로바이트 k는 물론 너비, 높이 및 품질을 너무 작게 설정하면 그림이 매우 왜곡됩니다. 이 문자열을 얻는 방법은 무엇입니까? 두 가지 방법이 있는데, 하나는 src를 직접 읽는 것입니다:

 var base641 = resImg.src;

로그인 후 복사

다른 하나는 캔버스를 사용하여 변환하는 것입니다:

 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);

로그인 후 복사

같은 그림에 대해 둘이 얻은 문자열 크기가 다르지만 차이점을 알 수 없습니다. 화질에서.

예를 들어 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. 압축되지 않은 경우 양식 데이터에 직접 설치하고 백엔드로 보냅니다.

   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 중국어 웹사이트의 다른 관련 기사를 주목하세요! RECEMEDRENDED 읽기 : jS 버블 링 및 브라우저 기본 동작 및 캔버스 복합 이미지를 방지하는 방법 WeChat Public Account Posters in jQuery

에서 사용됩니다. DataTable 플러그인이 비동기 로딩을 구현합니까?

위 내용은 HTML5를 사용한 이미지 압축 및 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!