// 此办法是旋转图片

 

canvas.height = height = drawHeight;

  1. //绘制照片

  2. function drawPhoto(photo, x, y, w, h)
    {

  3.  

  4.     //获取照片的拍片方向

  5.     var orient =
    getPhotoOrientation(photo);

  6.     alert(“orient2:”+orient);

  7.  

  8.     var canvas =
    document.getElementById(“canvas”);

  9.     if (canvas.getContext) {

  10.         var ctx =
    canvas.getContext(“2d”);

}

  而exif.js提供的一张照片的Orientation属性如下:

var minSide = Math.min(drawWidth, drawHeight);

  在自家的Samsungnote五的手提式有线电电话机中,须求一会并发照片预览逆时针转动90度的bug(其实用下面介绍的的exif.js方法,能够明白iOS和Samsung所拍的肖像Orientation值都以6,而前者做了预览的勘误,后者则直接突显了出去,导致了旋转)。

orientation = EXIF.getTag(this, ‘Orientation’);

 

canvas.height = width;

 

});

  1.     var orient;

  2.     EXIF.getData(img, function () {

 

 

case 3:

 

canvas.height = width;


var _this = $(this);

  1.         alert(“看清楚哦,这几个供给图片!”);

  2.         return false;

  3.     }

  4.     var reader = new FileReader();

  5.     //将文件以Data UKugaL形式读入页面

  6.     reader.readAsDataURL(file);

drawHeight = this.naturalHeight;

此处,大家先看多少个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/

//再次回到修正图片

 

drawWidth = maxSide;

    使用格局(使用drawTempPhoto方法完成须要一):

image.onload = function () {

  1. //绘制照片

  2. function drawPhoto(photo, x, y, w, h)
    {

  3.  

  4.     var canvas =
    document.getElementById(“canvas”);

  5.     if (canvas.getContext) {

  6.         var ctx =
    canvas.getContext(“2d”);

var canvas = document.createElement(‘canvas’);

  ②新drawPhoto方法【line:4-6,19-30】:

 

图片 1

drawHeight = height;

  那里大家明白了exif.js其实是获得一张拍戏照片的元音信的,进而得到它最初的摄影方向,那很恐怕跟iOS图片旋转的bug有关。

var site = location.protocol + ‘//’ + location.host +
‘/api/wx_user/upload_img/base_upload’;

  1.                 ctx.rotate(90 *
    Math.PI / 180);//把画布旋转90度

 

 

data: { str: data, type: file.type },

 

//使用canvas旋转改进

 

var degree = 0, drawWidth, drawHeight, width, height;

 

})

 

// html

例行的结果:

dataType: ‘json’,

 

degree = 90;

操作步骤:

drawHeight = -height;

1、让input file支持拍照+相册选取

degree = 180;

  必要壹:手提式有线电话机相册接纳或照相照片后在页面上预览

drawHeight = -height;

 

} else {

图片 2

//以下改变一下图片大小

  1.  

  2.         //draw on Canvas

  3.         var img = new Image();

  4.         img.onload = function () {

}

 

alert(‘选用的文件类型不是图片’);

 

}

  消除方案:

}

 

});

  ②、然后封装成getPhotoOrientation方法:

reader.onload = function (e) {

  1.             alert(“看清楚哦,那些要求图片!”);

  2.             return false;

  3.         }

  4.         var reader = new FileReader();

  5.         //将文件以Data U宝马7系L方式读入页面

  6.         reader.readAsDataURL(file);

if (drawWidth > drawHeight) {

 

switch (dir) {

二、再点击”draw on
Canvas”,该按钮下的画布会绘制你刚才拍片的肖像。

function getImgData(img, dir, next) {

 

image.src = img;

 

<!– 化解图片旋转 –>

 

case 8:

背景:

 var imgtype = img.includes(‘image/png’) ? “image/png” : “image/jpeg”;

  1.  

  2.         //draw on Canvas

  3.         var img = new Image();

  4.         img.onload = function () {

//iphone竖屏拍录,此时home键在上面

 

context.rotate(degree * Math.PI / 180);

style=”font-family: 宋体; background-color: white;”>介绍:

style=”font-family: Helvetica; background-color: white;”>FileReader style=”font-family: 小篆; background-color: white;”>接口提供了三个异步 style=”font-family: Helvetica; background-color: white;”>API style=”font-family: 大篆; background-color: white;”>,使用该 style=”font-family: Helvetica; background-color: white;”>API style=”font-family: 黑体; background-color: white;”>能够在浏览器主线程中异步访问文件系统,读取文件中的数据。

 

style=”color: #362e2b; font-family: 宋体; font-size: 18px;”> style=”background-color: white;”>API style=”background-color: white;”>文档:

style=”color: #362e2b; font-family: Helvetica; font-size: 14px; background-color: white;”>https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

 

兼容性:

style=”font-size: 14px;”>主流浏览器都补助。除了IE有点难点,详情看下图:

 

style=”font-size: 14px; font-family: 宋体;”>图片 3

//判断图片方向,重置canvas大小,鲜明旋转角度,iphone暗中同意的是home键在左边的横屏拍片艺术

  需求一:drawTempPhoto方法

drawWidth = -width;

手机型号

Orientation值

iphone 6S

6

小米4S

undefined

华为荣耀4A

1

PC

undefined

reader.readAsDataURL(file);

 

// 此情势是旋转图片;

  1. //绘制照片

  2.     function drawTempPhoto() {

  3.  

  4.         //检查评定是还是不是为图像文件

  5.         var file =
    document.getElementById(“file”).files[0];

  6.         if (!/image\/\w+/.test(file.type)) {

<input type=”file” accept=”image/*;capture=camera”>

  1.   <script src=”./js/exif.js”></script>

canvas.width = width = drawWidth;

 

context.drawImage(this, 0, 0, drawWidth, drawHeight);

   消除方案:

$(“input[type = file]”).change(function () {

  运维结果如下:

drawWidth = -width;

 

 

  图片 4

minSide = minSide / maxSide * 1024;

  1.  

  2.             var canvas_w =
    Number(ctx.canvas.width);

  3.             var canvas_h =
    Number(ctx.canvas.height);

  4.  

  5.             // 执行Canvas的drawImage语句

  6.             ctx.drawImage(img, x, y,
    w, h);

  7.  

  8.         }

  9.         img.src = photo.src; // 设置图影片来源地址

  10.     }

  11. }

break;

 

var context = canvas.getContext(‘2d’);

 

}

 

drawWidth = this.naturalWidth;

 

 

  可知,在iOS上首先张图符合规律,而第二张图逆时针旋转了90度,而其他的安卓两步都以正规的来得。

//iphone横屏拍戏,此时home键在左侧

  那我们来看看exif.js是哪些?

maxSide = 1024;

 

_this.siblings(“img”).attr(‘src’, i.img_url);

  1. //获取照片的元新闻(拍片方向)

  2. function getPhotoOrientation(img){

 

 

};

自己的一个平移端H5种类,需要如下:

var maxSide = Math.max(drawWidth, drawHeight);

  1.                 ctx.restore();//复苏情状

  2.             } else {

  3.                 // 执行Canvas的drawImage语句

  4.                 ctx.drawImage(img, x,
    y, w, h);

  5.             }

  6.  

  7.         }

  8.         img.src = photo.src; // 设置图片源地址

  9.     }

  10. }

// 判断图片  类型 (可增添判断的品类  此处只看清了 jpeg 和png)

三、供给贰绘制到Canvas,使用exif.js消除iOS(包蕴三星(Samsung)note五)等局地部手提式有线电话机照片旋转90度的bug

success: function (i) {

  介绍:

  Exif.js 提供了 JavaScript
读取图像的本来数据的功用扩充,例如: style=”color: red;”>拍照方向、相机设备型号、拍片时间、ISO
感光度、GPS 地理地方等数码。

 

  兼容性:

  EXIF
数据首要来源拍录的照片,多用于移动端支出,PC
端也会用到,此插件包容主流浏览器,IE十 以下不帮助。

 

  下载地址:

   
  https://github.com/exif-js/exif-js

break;

图片 5

break;

 

type: ‘post’,

  ①旧drawPhoto方法:

// console.log(file)

  1.  

  2.             var canvas_w =
    Number(ctx.canvas.width);

  3.             var canvas_h =
    Number(ctx.canvas.height);

  4.  

  5.             //判断图片拍片方向是还是不是旋转了90度

}

  需求二:然后绘制在canvas画布上

});

 

var image = new Image();

 

case 6:

  1.         orient = EXIF.getTag(this, ‘Orientation’);

  2.     });

  3.     return orient;

  4. }

url: site,

正文:

}

 

drawHeight = minSide;

  由此消除这些bug的思绪是:获取到照片拍片的倾向,对ios照片举行角度旋转修正。

var reader = new FileReader();

 

var file = this.files[0];

 

canvas.width = height;

 

next(canvas.toDataURL(imgtype, .8));

 

 

 

drawHeight = maxSide;

  1.         img.src = this.result;

  2.  

  3.     }

  4.  

  5. }

// 此处ajax用于 base6肆路径转换到符合规律路径 

 

drawWidth = width;

 

var orientation;

 

getImgData(this.result, orientation, function (data) {

  需求二:drawPhoto方法

return;

 

<script src=”/libs/exif/exif.js”></script>

      图片 6

<script src=”/libs/jquery/jquery.min.js”></script>

  1.                 // 执行Canvas的drawImage语句

  2.                 ctx.drawImage(img,
    Number(y) – canvas_h / 2, Number(x) – canvas_w / 二, h, w);//把图纸绘制在画布translate此前的中央点,

drawWidth = minSide;

  图片 7

if (maxSide > 1024) {

 

//那里能够运用订正后的图样data了

贰、供给1的预览功能使用html伍提供的新API:FileReader

EXIF.getData(file, function () {

 

if (!/image.(png|jpg|jpeg|bmp)/.test(file.type)) {

 

$.ajax({

1、点击选取文件,拍片一张照片,此时”预览:”文字下会呈现你刚刚拍录的照片;

//iphone竖屏拍录,此时home键在红尘(符合规律拿手提式有线电话机的大方向)

    1. <input accept=”image/*” type=”file” id=”file” />

    2. //有壹部分不一样平时的安卓机还供给丰裕capture=”camera” 属性才能支撑拍照

canvas.width = height;

  1.  

  2.         //预览效果

  3.         var img = $(“#photo”)[0];

  4.         //加载图片,此处的this.result为base64格式

degree = 270;

  1、笔者第一引进exif.js:

//EXIF js 能够读取图片的元消息 https://github.com/exif-js/exif-js

  1.             img.src = this.result;

  2.             img.onload = function(){

  1.  

  2.                 //获取照片的录制方向

  3.                 var orient =
    getPhotoOrientation(img);

  4.                 alert(“orient1:” + orient);

  5.                 //判断是或不是是苹果手提式有线电话机

  6.       
         // if (isSamsung) {

  7.          
                // 做旋转的适配……

  8.          
          // }

  9.  

  10.             };

  11.  

  12.         }

  13.  

  14.     }

 

  在iOS上,表现如下:

  1.     reader.onload = function (e) {

 

  1.  

  2.             //预览效果

  3.             var img = $(“#photo”)[0];

  4.             //加载图片,此处的this.result为base6四格式

 

  三、分别在操作步骤一挑选图片和操作步骤二draw on
Canvas,Alert照片的Orientation值,本身的测试机有限,请见谅,结果如下:

  注:

   **判断是还是不是为苹果手提式有线电话机配备,然后把预览的图样顺时针旋转90度恢复平时(例如可以用canvas技术模拟预览效果)。**

  1. //绘制照片

  2. function drawTempPhoto() {

  3.  

  4.     //检查评定是否为图像文件

  5.     var file =
    document.getElementById(“file”).files[0];

  6.     if (!/image\/\w+/.test(file.type)) {

  除了上边引进的exif.js和增加的getPhotoOrientation方法,作者又修改了drawPhoto方法:

  能够见见,One plus肆S和PC都是undefined,表示图片并未有摄影方向依然根本没记录,HTC荣耀四A是一,表示的是未可厚非的倾向,以上都没难点。但iphone
陆S为陆!所以之所以出现了图片的旋转,是因为它本身的Orientation就不健康!!

 

 

  1.             if (orient == 6) {

  2.                 ctx.save();//保存意况

  3.                 ctx.translate(canvas_w / 2,
    canvas_h / 贰);//设置画布上的(0,0)地方,也正是旋转的中央点

  1.         reader.onload = function (e) {

   完美~

  修改后的demo(http://jsfiddle.net/q3011893/k3z5ev26/embedded/

  于是修改的drawTempPhoto方法如下【line:贰1-二柒】: