1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > js使用base64 上传图片解决iOS手机竖屏拍摄图片发生旋转问题

js使用base64 上传图片解决iOS手机竖屏拍摄图片发生旋转问题

时间:2023-03-23 05:51:25

相关推荐

js使用base64 上传图片解决iOS手机竖屏拍摄图片发生旋转问题

###iOS上拍摄/储存的图片会附带属性orientation(方向角)。这个属性会影响图片的显示方向。可以通过插件 exif.js 获取此属性。 使用插件 mobileBUGFix 调整方向角。

###新建js upload.js

$.fn.UploadImg = function(o) {this.change(function() {var file = this.files['0'];console.log(file);$('#error').html(file.type);if(file.size && file.size > o.mixsize) {o.error('大小超过限制');this.value = '';} else if(o.type && o.type.indexOf(file.type) < 0) {o.error('格式不正确');this.value = '';} else {var URL = URL || webkitURL;var blob = URL.createObjectURL(file);o.before(blob);_compress(blob, file);this.value = '';}});function _compress(blob, file) {var img = new Image();img.src = blob;img.onload = function() {var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');if(!o.width && !o.height && o.quality == 1) {var w = this.width;var h = this.height;} else {var w = o.width || this.width;var h = o.height || w / this.width * this.height;}$(canvas).attr({width: w,height: h});ctx.drawImage(this, 0, 0, w, h);var base64 = canvas.toDataURL(file.type, (o.quality || 0.8) * 1);if(navigator.userAgent.match(/iphone/i)) {var myorientation = 0;EXIF.getData(file, function() {//图片方向角 var Orientation = null;// alert(EXIF.pretty(this)); EXIF.getAllTags(this);//alert(EXIF.getTag(this, 'Orientation')); myorientation = EXIF.getTag(this, 'Orientation');//return; // alert(myorientation.toString());var mpImg = new MegaPixImage(img);mpImg.render(canvas, {maxWidth: w,maxHeight: h,quality: o.quality || 0.8,orientation: myorientation});base64 = canvas.toDataURL(file.type, o.quality || 0.8);_ajaximg(base64, file.type);});}// 修复androidif(navigator.userAgent.match(/Android/i)) {var encoder = new JPEGEncoder();base64 = encoder.encode(ctx.getImageData(0, 0, w, h), o.quality * 100 || 80);_ajaximg(base64, file.type);}};}function _ajaximg(base64, type, file) {$.post(o.url, {base64Img: base64}, function(res) {var res = eval('(' + res + ')');if(res.status == 1) {o.error(res.msg);} else {o.success(res.imgurl);}console.log(res);});}};复制代码

###使用方法

$('#thumbnail').UploadImg({url: url,width: '320',height: '320',quality: '0.8', //压缩率,默认值为0.8// 如果quality是1 宽和高都未设定 则上传原图mixsize: '10000000',//type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',before: function(blob) {var imageMy = $('#my_face');imageMy.attr('src', blob);},error: function(res) {alert('error');},success: function(res) {alert('success');}});复制代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。