js---图片旋转

方案一

/**

* 旋转照片

* @param dom 要旋转的dom元素

*/

function rotate(dom){

    var ele =$(dom);

    var css = ele.css('transform');

    var deg;

    var step=90;//每次旋转多少度

    if(css ==='none'){

        deg =0;

    }else {

        deg=eval('get'+css);

    }

    ele.css({'transform':'rotate('+(deg+step)%360+'deg)'});

}

function getmatrix(a,b,c,d,e,f){

    var aa=Math.round(180*Math.asin(a)/ Math.PI);

    var bb=Math.round(180*Math.acos(b)/ Math.PI);

    var cc=Math.round(180*Math.asin(c)/ Math.PI);

    var dd=Math.round(180*Math.acos(d)/ Math.PI);

    var deg=0;

    if(aa===bb||-aa===bb){

        deg=dd;

    }else if(-aa+bb===180){

        deg=180+cc;

    }else if(aa+bb===180){

        deg=360-cc||360-dd;

    }

    return deg>=360?0:deg;

}

方案二

/**

* 旋转照片方向

* @param {Object} dir 照片方向

*/

function getImgData(dir) {

    var image =new Image();

    image.onload =function () {

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

        drawWidth =this.naturalWidth;

        drawHeight =this.naturalHeight;

        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);

    //返回校正图片

    return canvas.toDataURL("image/jpeg", 1);

    }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容