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'});}
效果:
阅读全文
0 0
- H5图片选取器
- UIImagePickerController--------图片选取器
- iOS图片选取器
- 图片选取器
- 图片选取器的使用
- iOS 图片选取器Demo
- 选取图片
- iphone 怎么使用图片选取器 UIImagePickerController
- iphone 怎么使用图片选取器 UIImagePickerController
- 从gallery选取图片
- 从相册选取图片
- android 选取相册图片
- iOS选取相册图片
- 从相册选取图片
- iOS 拍摄图片选取
- HTML图片地址选取
- 拍摄图片和选取图片
- ios中UIImagePickerController 图片选取器的使用
- Python
- Android Studio 误将工程下的build删除
- RIP协议
- setjmp和longjmp函数使用详解
- 详解mysql备份恢复的三种实现方式
- H5图片选取器
- windows下Maven环境搭建
- 网络协议:用户数据报协议(UDP)
- [leetcode]22. Generate Parentheses(Java)
- Eclipse下svn的创建分支/合并/切换使用
- RedHat 7.0 VMware Tools 安装
- iOS定义静态变量、静态常量、全局变量
- 关于之前修改输入框的问题追加
- 新学的一种qsort用法