前端预览图片和H5canvas压缩图片上传

思路是将图片抽样显示在canvas上，然后用通过canvas.toDataURL方法得到base64字符串来实现压缩。

1.base64转二进制文件

/**

 * dataURL to blob, ref to https://gist.github.com/fupslot/5015897

 * @param dataURI

 * @returns {Blob}

 */

function dataURItoBlob(dataURI) {

    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    var ab = new ArrayBuffer(byteString.length);

    var ia = new Uint8Array(ab);

    for (var i = 0; i < byteString.length; i++) {

        ia[i] = byteString.charCodeAt(i);

    }

    return new Blob([ab], {type: mimeString});

}

2.压缩参数(图片对象,品质,输出格式) 返回压缩后图片对象

function compress(source_img_obj, quality, output_format){

        var mime_type = "image/jpeg";

        if(output_format!=undefined && output_format=="png"){

            mime_type = "image/png";

        }

        var cvs = document.createElement('canvas');

                 //naturalWidth真实图片的宽度

                 cvs.width = source_img_obj.naturalWidth;

                 cvs.height = source_img_obj.naturalHeight;

                 var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

                 var newImageData = cvs.toDataURL(mime_type, quality/100);

                 var result_image_obj = new Image();

                 result_image_obj.src = newImageData;

                 return result_image_obj;

}

3.主要流程

获得和读取图片对象
创建canvas,尺寸设置压缩后的图片尺寸　　
调用drawImage方法，把图片绘制到canvas中
调用canvas的toDataURL,取出 base64 格式的数据
调用dataURItoBlob方法转为二进制文件,再构造FormData填充二进制文件数据，通过ajax的方式进行提交

var file = e.target.files[0];

var reader = new FileReader(); //读取文件对象

reader.onload = (function(theFile) {

var img = document.getElementById("img-fileUpload_compress") //onload和onloadend

var quality =  10; //图片品质1-100

img.src = event.target.result //reader.result

window.setTimeout(function(){

var imgObj = compress(img,quality) //压缩后的图片

var src = imgObj.src; //图片的base64格式可以直接当成img的src属性值data/image

img.src = src;

var file = dataURItoBlob(src);//转二进制

file.filename = Math.round(Math.random()*100000000000000,0)+".jpg";

// 调上传接口

},1)

});

reader.readAsDataURL(file);

4.预览图片

监听表单文件变化

文件表单的样式主要通过让它后面，通过别的DOM来美化它。

<input type="file">

input.on.('change', preview);

预览

预览使用 FileReader 对象来读：

function preview(e) {

    var file = e.target.files[0];

    var reader = new FileReader();

    reader.onloadend = function () {

        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值

        var dataURL = reader.result;

        var img = new Image();

        img.src = dataURL;

        // 插入到 DOM 中预览 img标签

        // ...

    };

    reader.readAsDataURL(file); // 读出 base64

}

5.上传图片(构造 FormData填充二进制文件数据，通过ajax的方式进行提交)

var fd = new FormData();

var blob = dataURItoBlob(dataURL);

fd.append('file', blob);

$.ajax({

    type: 'POST',

    url: '/upload',

    data: fd,

    processData: false, // 不会将 data 参数序列化字符串

    contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType

    xhr: function() {

        var xhr = new window.XMLHttpRequest();

        xhr.upload.addEventListener("progress", function(evt) {

            if (evt.lengthComputable) {

                var percentComplete = evt.loaded / evt.total;

                console.log('进度', percentComplete);

            }

        }, false);

        return xhr;

    }

}).success(function (res) {

    // 拿到提交的结果

}).error(function (err) {

    console.error(err);

});

巴特西

前端预览图片和H5canvas压缩图片上传

监听表单文件变化

预览

最新文章

热门文章