exif

背景： 本人的一个移动端H5项目，需求如下: 　　 需求一 ：手机相册选取或拍摄照片后在页面上 预览 　　 需求二 ：然后 绘制在canvas 画布上 这里，我们先看一个demo（ http://jsfiddle.net/q3011893/83qfqpk8/embedded/ ） 　　 需求一 ： drawTempPhoto 方法 　　 需求二 ： drawPhoto 方法 操作步骤： 1、点击选择文件，拍摄一张照片，此时"预览："文字下会显示你刚才拍摄的照片； 2、再点击"draw on Canvas"，该按钮下的画布会绘制你刚才拍摄的照片。 正常的结果： -------------------------------------------------------------------------------------------------------- 正文： 1、让input file支持 拍照+相册 选取 <input accept=" image/* " type=" file " id=" file " /> //有一些特殊的安卓机还需要加上 capture="camera" 属性才能支持拍照 2、 需求一 的 预览 功能使用html5提供的新API： FileReader 介绍： FileReader 接口提供了一个异步 API ，使用该 API

问题：IOS手机拍照上传头像会出现图像旋转的问题 引入一个第三方 JS 库： exif.js 下载地址： https://github.com/exif-js/exif-js 通过exif.js 我们可以获取到图片的元信息，这其中就包括照片的拍照方向。而 exif.js 给出的照片方向属性如下图： IOS中通过 exif.js ，获取拍照的图片的方向，返回的值为 6， 也就是上图最左边的 F 的情况。 这也正是我们的bug所在。 因此我们通过判断方向的值来做相应的处理，如果值为 6 ，则我们对图片进行旋转矫正。具体代码如下： 1 2 3 4 5 6 7 8 //获取图片方向 function getPhotoOrientation(img) { var orient; EXIF.getData(img, function () { orient = EXIF.getTag( this , 'Orientation' ); }); return orient; } 同时处理前端压缩图片 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //图片压缩 function compress(img, width, height, ratio) { var canvas, ctx, img64, orient; //获取图片方向

转：https://blog.csdn.net/woniuye/article/details/89218461 图像基本数据结构 要讲图片格式还先得从图像的基本数据结构说起。在计算机中, 图像是由一个个像素点组成，像素点就是颜色点，而颜色最简单的方式就是用RGB或RGBA表示, 如图所示 (图1) (图2) 如果有A通道就表明这个图像可以有透明效果。 R,G,B每个分量一般是用一个字节(8位)来表示，所以图(1)中每个像素大小就是3*8=24位图, 而图(2)中每个像素大小是4*8=32位。 这里有三点需要说明: 一、图像y方向正立或倒立 图像是二维数据，数据在内存中只能一维存储，二维转一维有不同的对应方式。比较常见的只有两种方式: 按像素“行排列”从上往下或者从下往上。 如图所示的图像有9个像素点，如果从上往下排列成一维数据是(123456789)， 如果是从下往上排列则为(789456123)。 只所以会有这种区别是因为，前一种是以计算机图形学的屏幕坐标系为参考(右上为原点,y轴向下 )，而另后一种是以标准的数学坐标系为参考(右下为原点,y轴向上)。这两个坐标系只是y值不一样，互相转换的公式为: y2 = height-1-y1 y1,y2分别为像素在两个坐标系中的y坐标，height为图像的高度。 不过好像只有bmp图片格式以及windows下的GDI，GDI