前端预览图片和H5canvas压缩图片上传
2017-03-25 17:12
676 查看
思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩。
1.base64转二进制文件
2.压缩 参数(图片对象,品质,输出格式) 返回压缩后图片对象
3.主要流程
获得和读取图片对象
创建
调用
调用
调用dataURItoBlob方法转为二进制文件,再构造
4.预览图片
5.上传图片(构造
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进行前端图片压缩再上传笔记
- JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
- 用html5 canvas js 实现图片大小的压缩显示,图片上传后可在线预览。
- 利用canvas前端实现图片压缩后上传
- js加canvas实现图片的预览压缩和上传
- 移动前端—H5实现图片先压缩再上传
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- 移动端(h5)上传,压缩,预览图片
- H5 canvas实现客户端压缩图片上传
- H5上传图片前端预览显示
- H5图片预览及上传(WEB前端)
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
- JS和Canvas实现图片的预览压缩和上传功能
- H5图片压缩与上传
- HTML5 Canvas前台压缩图片并上传到服务器
- 前端图片预览,上传前预览,兼容IE7、8、9、10、11,FIREFOX,CHROME
- html5 前端图片处理(预览、压缩、缩放)
- 使用H5的FileApi预览将要上传的图片
- 多文件上传预览,canvas压缩处理
- megapix-image插件 使用Canvas压缩图片上传 MegaPixImage.js下载