JS 图片压缩上传并在iOS中矫正方向

最近在项目中，用到图片上传。如果不进行压缩再上传的话，动辄34兆的图片，上传起来会相当漫长。还有一点就是，在iOS中所拍摄的图片在本地显示是没有问题的，但是上传之后，会出现图片翻转的问题。这里需要进行校正。还有一点就是需要判断是不是GIF，如果上传的是GIF动态图的话，就不要压缩额，压缩完之后，GIF就从良了（不动了的）。可能GIF在前段有别的压缩方式，但是我不知道的方法不是好方法。

我不生产代码爷们是代码的搬运工

话不多说，直接干上代码。下面这段代码先对GIF和一般的图片做出区分，根据不同的模块加载不同的方法。

        var filechooser = document.getElementById("filechooser");var fo = $("#tuwem_0");filechooser.onchange = function() {if($(".z_addImg").length == 6){ return };var file = this.files[0];var orientation;if(/\/(?:gif|GIF)/i.test(file.type)){   xoupxx(file);}else{EXIF.getData(file, function() {orientation = EXIF.getTag(this, 'Orientation');var reader = new FileReader();reader.onload = function(e) {getImgData(this.result, orientation, function(data) {//这里可以使用校正后的图片data了});}reader.readAsDataURL(file);}   }

虽然代码是连续的但我还是想分开来写，这样显得多。我备注的很详细（怕自己也忘记了）。GIF下要加载的函数。

    function xoupxx(file){var reader = new FileReader(); //HTML5定义了FileReader作为文件API的重要成员用于读取文件reader.onload = function() {var result = this.result;  //result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。var img = new Image();toPreviewer(result);return;};  reader.readAsDataURL(file);}
//下面这段代码主要是为了展示出来。
function toPreviewer(dataUrl) {var op="";var img = new Image();op = dataUrl;fo.append('<input class="remo" type="hidden" name="imgPic" value="'+op+'">');img.src = op;var ddiv = $("<div class='z_addImg'><div class='mm'></div></div>");ddiv.append(img);$('.z_photo').append(ddiv);}

JPG PNG等等图片可以压缩，转换为base64位再进行上传。

function getImgData(img, dir, next) {var image = new Image();image.onload = function() {var degree = 0,drawWidth, drawHeight, width, height;drawWidth = this.naturalWidth;drawHeight = this.naturalHeight;//以下改变一下图片大小var maxSide = Math.max(drawWidth, drawHeight);if(maxSide > 1024) {var minSide = Math.min(drawWidth, drawHeight);minSide = minSide / maxSide * 1024;maxSide = 1024;if(drawWidth > drawHeight) {drawWidth = maxSide;drawHeight = minSide;} else {drawWidth = minSide;drawHeight = maxSide;}}var canvas = document.createElement('canvas');canvas.width = width = drawWidth;canvas.height = height = drawHeight;var context = canvas.getContext('2d');//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式switch(dir) {//iphone横屏拍摄，此时home键在左侧case 3:degree = 180;drawWidth = -width;drawHeight = -height;break;//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)case 6:canvas.width = height;canvas.height = width;degree = 90;drawWidth = width;drawHeight = -height;break;//iphone竖屏拍摄，此时home键在上方case 8:canvas.width = height;canvas.height = width;degree = 270;drawWidth = -width;drawHeight = height;break;};//使用canvas旋转校正context.rotate(degree * Math.PI / 180);context.drawImage(this, 0, 0, drawWidth, drawHeight);//返回校正图片//next(canvas.toDataURL("image/jpeg", .8));//console.log(canvas.toDataURL("image/jpeg", .8));//previewer.src = canvas.toDataURL("image/jpeg", .8);   //base64var op="";var img = new Image();op = canvas.toDataURL("image/jpeg", .8);fo.append('<input class="remo" type="hidden" name="imgPic" value="'+op+'"><input type="hidden" name="isPng" value="1">');img.src = canvas.toDataURL("image/jpeg", .8);var ddiv = $("<div class='z_addImg'><div class='mm'></div></div>");ddiv.append(img);$('.z_photo').append(ddiv);}image.src = img;};

后端代码很简单，这里我一并干上来！把base64转成文件

def decode_file(data):""""""imgdata=base64.b64decode(re.sub(r'data:image/.*?;base64,', '', data))file = '.' + "".join(re.findall(r'data:image/(.*?);', data))md = hashlib.md5()md.update(str(random.randint(1111, 999999999)+int(time.time())))file_name = md.hexdigest() + filefile=open(AllConf.FILE_PATH + file_name,'wb')file.write(imgdata)file.close()return gif_to_png(AllConf.FILE_PATH + file_name)def gif_to_png(file):if 'gif' in file or 'GIF' in file:new_file = "".join(file.split('.')[:1])print new_file, filex = Image.open(file)x.convert('RGB').save(new_file + '.jpg')gif = re.sub(AllConf.FILE_PATH, AllConf.FILE_URL, file)png = re.sub(AllConf.FILE_PATH, AllConf.FILE_URL, new_file + '.jpg')return gif + '&&' + pngreturn re.sub(AllConf.FILE_PATH, AllConf.FILE_URL, file)

JS 图片压缩上传并在iOS中矫正方向相关推荐

js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
web 前端图片优化之--图片压缩上传
移动前端-图片压缩上传实践此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传 ...
基于Plupload的图片压缩上传
前言这里的上传工具基于JQuery.Plupload 传送门:Plupload官方.中文文档为什么要做图片压缩? 现在手机拍照都快10M了,但是有时候图片上传只要看得清楚就可以了,比如上传身份证2 ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
移动端实现图片压缩上传
移动端实现图片压缩上传目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.根据查看caniuse,本demo里使用到的FileReader.Blob.Formdata对象均 ...

JS 图片压缩上传并在iOS中矫正方向

JS 图片压缩上传并在iOS中矫正方向

JS 图片压缩上传并在iOS中矫正方向相关推荐

最新文章

热门文章