vuejs组件分享H5图片上传、压缩,拍照旋转
2016-12-31 22:12
1116 查看
处理问题
这里用h5做图片上传考虑到浏览器支持的问题,这里考虑的场景是在做webapp的时候
1.移动web图片上传还包括拍摄上传,但是在移动端会出现拍摄的照片会旋转,处理这个问题需要得到图片旋转的情况,可以用exif.js来获取,具体可以参看文档
官网参考:http://code.ciaoca.com/javascript/exif-js/
2.图片压缩
3.旋转
一、代码
1组件代码
2.使用方法
这里用h5做图片上传考虑到浏览器支持的问题,这里考虑的场景是在做webapp的时候
1.移动web图片上传还包括拍摄上传,但是在移动端会出现拍摄的照片会旋转,处理这个问题需要得到图片旋转的情况,可以用exif.js来获取,具体可以参看文档
官网参考:http://code.ciaoca.com/javascript/exif-js/
2.图片压缩
3.旋转
一、代码
1组件代码
<template> <div> <input type="file" style="display: none;" id="img-upload" multiple accept="image/*" @change="uploadImg($event)"/> </div> </template> <script> import EXIF from '../../../Resource/Global/Js/exif' export default{ name:"image-html5-upload", props:{ imgArr:{ type:Array, twoWay: true, default:Array }, imgNumLimit:{//一次最多可以上传多少张照片 type:Number, default:4 } }, methods:{ "uploadImg": function(e){ let tag = e.target; let fileList = tag.files; let imgNum = fileList.length; let _this = this; _this.imgArr = [];//图片数据清零 if(this.imgArr.length + imgNum > this.imgNumLimit){ alert('一次最多上传'+this.imgNumLimit+'张图片!'); return; } var Orientation; for(let i=0;i<imgNum;i++){ EXIF.getData(fileList[i], function(){ Orientation = EXIF.getTag(fileList[i], 'Orientation'); }); let reader = new FileReader(); reader.readAsDataURL(fileList[i]); reader.onload = function(){ var oReader = new FileReader(); oReader.onload = function(e) { var image = new Image(); image.src = e.target.result; image.onload = function() { var expectWidth = this.naturalWidth; var expectHeight = this.naturalHeight; if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) { expectWidth = 800; expectHeight = expectWidth * this.naturalHeight / this.naturalWidth; } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) { expectHeight = 1200; expectWidth = expectHeight * this.naturalWidth / this.naturalHeight; } var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = expectWidth; canvas.height = expectHeight; ctx.drawImage(this, 0, 0, expectWidth, expectHeight); var base64 = null; //修复ios上传图片的时候 被旋转的问题 if(Orientation != "" && Orientation != 1){ switch(Orientation){ case 6://需要顺时针(向左)90度旋转 _this.rotateImg(this,'left',canvas); break; case 8://需要逆时针(向右)90度旋转 _this.rotateImg(this,'right',canvas); break; case 3://需要180度旋转 _this.rotateImg(this,'right',canvas);//转两次 _this.rotateImg(this,'right',canvas); break; } } base64 = canvas.toDataURL("image/jpeg", 0.8); if(fileList[i].size / 1024000 > 1){ _this.imgScale(base64, 4) }else{ _this.imgArr.push({"src": base64}); } console.log(JSON.stringify(_this.imgArr)); }; }; oReader.readAsDataURL(fileList[i]); } } }, "imgScale": function(imgUrl,quality){ let img = new Image(); let _this = this; let canvas = document.createElement('canvas'); let cxt = canvas.getContext('2d'); img.src = imgUrl; img.onload = function(){ //缩放后图片的宽高 let width = img.naturalWidth/quality; let height = img.naturalHeight/quality; canvas.width = width; canvas.height = height; cxt.drawImage(this, 0, 0, width, height); _this.imgArr.push({"src": canvas.toDataURL('image/jpeg')}); } }, "rotateImg":function (img, direction,canvas) {//图片旋转 var min_step = 0; var max_step = 3; if (img == null)return; var height = img.height; var width = img.width; var step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } var degree = step * 90 * Math.PI / 180; var ctx = canvas.getContext('2d'); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } } } } </script>
2.使用方法
<template> <div> <div class="album-img-list"> <ul> <li v-for="img in imgList"><div class="album-bg-img"><img :src='img.src'> </div></li> </ul> </div> <div class="album"> <label for="img-upload">上传照片</label> <image-html5-upload :img-arr.sync="imgList"></image-html5-upload> </div> </div> </template>
相关文章推荐
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- [iOS 拍照上传] 上传图片 旋转 + 压缩大小
- vue2移动端上传,预览,压缩图片,解决拍照旋转问题
- 项目分享五:H5图片压缩与上传
- vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
- 项目分享五:H5图片压缩与上传
- vue2移动端上传,预览,压缩图片,解决拍照旋转问题
- vue2移动端上传,预览,压缩图片,解决拍照旋转问题
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- Android:Camera的使用,并处理手机拍照后上传图片被旋转的问题
- 解决android有的手机拍照后上传图片被旋转的问题
- 图片压缩保存 处理三星拍照图片旋转问题的部分方法
- H5移动端下html上传图片被旋转问题
- 高仿微信上传头像附带压缩,旋转图片,附加demo
- 拍照上传的图片被旋转问题
- H5图片压缩与上传
- UIImage在拍照上传到服务器时,图片发生旋转解决方案
- artEditor增加h5拍照上传图片