ios html5 exif,IOS中html5上传图片方向问题解决方法
// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法,返回校正方向后的base64
function getImgData(img,dir,next){
var image=new Image();
image.οnlοad=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));
}
image.src=img;
}
ios html5 exif,IOS中html5上传图片方向问题解决方法相关推荐
- iphone的Safari浏览器中HTML5上传图片方向问题解决方法
前段时间在上传图片的时候前端使用FileReader将图片读到内存,使用canvas进行压缩,然后上传,在安卓手机上没有问题,但是在iphone的Safari浏览器中一直存在图片方向不正的问题,经过多 ...
- torch中的inplace操作问题解决方法
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 torch中的inplace操作问题解决方法 一.inplace操作是什么? 典型的inplace操作有哪些? 二.出错案例 总结 例 ...
- chrome 浏览器中罗技鼠标滚轮失灵问题解决方法
chrome 浏览器中罗技鼠标滚轮失灵问题解决方法 参考文章: (1)chrome 浏览器中罗技鼠标滚轮失灵问题解决方法 (2)https://www.cnblogs.com/fanyfan/p/11 ...
- html5 clip,canvas中使用clip()函数裁剪方法
未使用裁剪绘制一个圆 *{margin:0;padding:0;} html,body{width:100%;height:100%;overflow:hidden;background-color: ...
- html5 canvas 获取当前坐标,html5 canvas fillRect坐标和大小的问题解决方法
fillRect(100,100,100,100) 前2个100是指坐标,后2个100是指宽和高. 今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现can ...
- win7中VS2010中安装CSS3.0问题解决方法
在安装Standards Update for VS2010 SP1后,VS2010中没有CSS3.0问题,以下是我的解决方法 1.首先去官网下载 CSS 3 Intellisense Schema ...
- EndNote20教程:中英混排问题解决方法(中文参考文献处理) 附最新版下载
作为全球市场占有率最高的个人文献管理软件,EndNote虽然对中文文献及数据库极度不友好(至少我这样认为),但仍然不影响它在国内科研人员心中的地位,因为它对英文数据库及英文文献的支持是非常友好的. 个 ...
- html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
- php时区问题,PHP中遇到的时区问题解决方法
最近在学习PHP过程中发现PHP中的格式化时间戳比北京时间晚了8个小时,上网搜索发现原来是时区不对,解决办法是: 1.永久修改 更改php.ini文件中的data.timezone = PRC 这是 ...
最新文章
- golang 使用 protobuf 的教程
- jtag和swd的区别
- 可重入函数与不可重入函数(转)
- 消息称苹果下代iPhone、iPad产品都将采用钛合金
- php什么是阵列,php – 功能阵列的替代方法?
- [记录]---mysql数据库,decimal类型设置默认值0,不要是null
- BootStrap的入门和响应式的使用
- 雷军100亿押注IoT,小米借AI两翼齐飞
- C#高级知识点(ABP框架理论学习高级篇)——白金版
- python时间格式毫秒_Python获取秒级时间戳与毫秒级时间戳
- 后缀树后缀数组LCP
- 苹果手机左上角的数字怎么弄_手把手教你把抖音视频音乐设置为手机铃声。
- 开发过程中沟通的重要性
- 数字信号处理——绪论总结
- 【小程序开发】—— 封装自定义弹窗组件
- 快递柜管理系统微信小程序-计算机毕业设计
- 一键关机 / 重启脚本
- iphone7刷入linux,iPhone7怎么进入DFU模式 iPhone7刷机步骤【详解】
- Android使用Service播放音乐
- openstack理论知识【Openstack证书考试 2022】