H5图片选取器

来源:互联网 发布:获取json对象的属性值 编辑:程序博客网 时间:2024/06/05 09:22

最近的项目都有拍照上传的功能,所以把这个功能单独抽出来总结积累一下,以便以后复用。
功能:图片选取,滑动预览,删除,异步上传(压缩)
工具:Swiper插件
代码:https://github.com/jackLeong/imagePicker

图片压缩上传代码:

function send(){var url_send = "http://......";var scale = 3; //缩放比例$('.forIndex img').each(function(index,ele){        var canvas = document.createElement("canvas");        var image = this;         var w = image.naturalWidth;         var h = image.naturalHeight        canvas.width = w/scale;        canvas.height = h/scale;         // 坐标(0,0) 表示从此处开始绘制,相当于偏移。         canvas.getContext("2d").drawImage(image,0,0,w,h,0,0,w/scale,h/scale);         var dataURL = canvas.toDataURL("image/png");        var blob = convertBase64UrlToBlob(dataURL);        var file = new File([blob],(new Date()).valueOf()+'.png',{type:"image/png"});        var formData = new FormData();        formData.append('imgData',file);        $.ajax({          url: url_send,          type: 'POST',          data: formData,          cache: false,          async:true,          processData: false,         contentType: false,          success: function (data) {          },          error: function () {          }        });    });}function convertBase64UrlToBlob(urlData){    var decoded=window.atob(urlData.split(',')[1]);   //去掉Data URL的头部信息,window.atob解码base64,返回字符串(unicode字符串)对象    debugger;    console.log(decoded);    var typedArr = new ArrayBuffer(decoded.length);   //开辟字节数大小为decoded.length的类型化数组,相当一片内存空间    var uint8Arr = new Uint8Array(typedArr);          //创建一个指向typedArr的Uint8视图    for(var i=0;i<decoded.length;i++){        uint8Arr[i] = decoded.charCodeAt(i);          //charCodeAt返回unicode字符编码, uint8Arr,typeArr指向同一地址,    }    return new Blob( [uint8Arr] , {type : 'image/png'});}

效果

01.png