这几个关键词搞的我头大,简单记录下:

1.input file选择图片文件,通过readAsDataURL将file blob->dataURL,dataURL可直接为image的src赋值:

$('input[type="file"]').on('change',function(ev){
    let file=this.files[0];
    var reader = new FileReader();
    reader.onload = function(ev) {
        let dataURL=ev.target.result;//dataURL;
        let image = new Image();
        image.src=dataURL;
    }
    reader.readAsDataURL(file);//file->dataURL
});

注意:readAsDataURL除了可以将file blob->dataURL,也可将blob->dataURL。

2.dataURL->blob:

dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while(n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
},

blob可以得到size,也就是文件的大小。

3.canvas得到dataURL:

function test() {
    image.src ='http://***.';//图片地址
    image.onload = function() {
        var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            width = this.width,
            height = this.height;
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        var dataURL = canvas.toDataURL('image/jpeg',1.0),
    }
}

4.createObjectURL通过file获取图片:

window.URL = window.URL || window.webkitURL;
$('input[type="file"]').on('change',function(ev){
    let file=this.files[0];
     var img = document.createElement("img");
     img.src = window.URL.createObjectURL(files[i]);
     img.onload = function() {
        window.URL.revokeObjectURL(this.src);
     }
});

createObjectURL只是创建一个file的链接而已,图片加载完需要调用revokeObjectURL释放资源。

5.createObjectURL通过blob获取图片:

window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();    
    xhr.open("get", "/image/study/s/s256/mm1.jpg", true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        if (this.status == 200) {
            var blob = this.response;
            var img = document.createElement("img");
            img.onload = function(e) {
             window.URL.revokeObjectURL(img.src); // 清除释放
            };
            img.src = window.URL.createObjectURL(blob);
            eleAppend.appendChild(img);    
        }
    }
    xhr.send();

6.blob->file blob

let files = new window.File([this.blob], file.name, {type: file.type})

上传的时候指定文件名时会用到。

回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字