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

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

    1. $('input[type="file"]').on('change',function(ev){
    2.     let file=this.files[0];
    3.     var reader = new FileReader();
    4.     reader.onload = function(ev) {
    5.         let dataURL=ev.target.result;//dataURL;
    6.         let image = new Image();
    7.         image.src=dataURL;
    8.     }
    9.     reader.readAsDataURL(file);//file->dataURL
    10. });

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

    2.dataURL->blob:

    1. dataURLtoBlob(dataurl) {
    2.     var arr = dataurl.split(','),
    3.         mime = arr[0].match(/:(.*?);/)[1],
    4.         bstr = atob(arr[1]),
    5.         n = bstr.length,
    6.         u8arr = new Uint8Array(n);
    7.     while(n--) {
    8.         u8arr[n] = bstr.charCodeAt(n);
    9.     }
    10.     return new Blob([u8arr], {
    11.         type: mime
    12.     });
    13. },

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

    3.canvas得到dataURL:

    1. function test() {
    2.     image.src ='http://***.';//图片地址
    3.     image.onload = function() {
    4.         var canvas = document.createElement('canvas'),
    5.             context = canvas.getContext('2d'),
    6.             width = this.width,
    7.             height = this.height;
    8.         canvas.style.width = width + 'px';
    9.         canvas.style.height = height + 'px';
    10.         var dataURL = canvas.toDataURL('image/jpeg',1.0),
    11.     }
    12. }

    4.createObjectURL通过file获取图片:

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

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

    5.createObjectURL通过blob获取图片:

    1. window.URL = window.URL || window.webkitURL;
    2. var xhr = new XMLHttpRequest();    
    3.     xhr.open("get", "/image/study/s/s256/mm1.jpg", true);
    4.     xhr.responseType = "blob";
    5.     xhr.onload = function() {
    6.         if (this.status == 200) {
    7.             var blob = this.response;
    8.             var img = document.createElement("img");
    9.             img.onload = function(e) {
    10.              window.URL.revokeObjectURL(img.src); // 清除释放
    11.             };
    12.             img.src = window.URL.createObjectURL(blob);
    13.             eleAppend.appendChild(img);    
    14.         }
    15.     }
    16.     xhr.send();

    6.blob->file blob

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

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

    回到顶部
    我要评论

    所有评论

      相关文章