iphone 调用拍照上传 canvas校正

发表于 2017-01-17 21:07:22   |   下载附件   |   字体:
canwasiphone 拍照移动图片上传EXIF

完整代友段:


// 读取文件
// me 为 file 对象
// option 为 回调对象
var $ = require("../public/jquery.1.10.1.min.js");
var EXIF = require("./exif.js");

// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法,返回校正方向后的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));
    }
    image.src = img;
}

// 读取图片函数
var readImgFileUrl = function(me,option){
    var defaultOption = {
        // outputType 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
        outputType : "image/jpeg",
        // 开始读取图片
        loadStart:function(e){},
        // 读取完成
        complete:function(r){},
        // 读取出错
        error:function(e){}
    }
    var opts = $.extend(defaultOption, option);
    // 读取图片数据 并传入回调
    if (!me.files.length) return;
    if (!/image/w+/.test(me.files[0].type)) {
        alert("图片格式不正确,请选择正确格式的图片文件!");
        return false;
    } else {
        var orientation;
        //EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
        EXIF.getData(me.files[0],function(){
            orientation=EXIF.getTag(this,'Orientation');
        });
        // HTML5 用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据
        var fileReader = new FileReader();
        // 开始读取
        fileReader.onprogress = function(e) {
            // 开始读取
            console.log((e.loaded / e.total * 100).toFixed() + "%");
        };
        // 读取完成
        fileReader.onload = function(e) {
            // if (navigator.userAgent.match(/iphone/i)) { 
            // alert(navigator.userAgent.toString());
            getImgData(this.result, orientation, function(data) {
                //这里可以使用校正后的图片data了 
                opts.complete(data);
            });
        };
        // 读取出错
        fileReader.onerror = function(e) {
            // alert("图片加载失败");
            opts.error(this,e);
        };
        // 读取文件内容
        fileReader.readAsDataURL(me.files[0]);
        // 开始加载的回调函数
        opts.loadStart.call(fileReader, me.files[0]);
    }
}

// 接口调用
module.exports = {
    readImgFileUrl:readImgFileUrl
}