• EXIF.js 读取图片的方向


    1、引用exif.js

    <script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.min.js"></script>
    
    
    //图片方向角 added by lzk
    var Orientation = null;
    
    EXIF.getData(file, function() {
          EXIF.getAllTags(this);
          Orientation = EXIF.getTag(this, 'Orientation');
          console.log(Orientation);
    });
    
    //对图片旋转处理 added by lzk
    function rotateImg(img, direction, canvas) {
        // 最小与最大旋转方向,图片旋转4次后回到原方向  
        var min_step = 0;
        var max_step = 3;
        // var img = document.getElementById(pid);  
        if (img == null) return;
        // img的高度和宽度不能在img元素隐藏后获取,否则会出错  
        var height = img.height;
        var width = img.width;
        // var step = img.getAttribute('step');  
        var step = 2;
        if (step == null) {
            step = min_step;
        }
        if (direction == 'right') {
            step++;
            //旋转到原位置,即超过最大值  
            step > max_step && (step = min_step);
        } else {
            step--;
            step < min_step && (step = max_step);
        }
        //旋转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;
        var ctx = canvas.getContext('2d');
        switch (step) {
            case 0:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0);
                break;
            case 1:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, 0, -height);
                break;
             case 2:
                canvas.width = width;
                canvas.height = height;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, -height);
                break;
             case 3:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, 0);
                break;
         }
    } const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); if (Orientation != undefined && Orientation != "" && Orientation != 1) { // 旋转处理 switch (Orientation) { case 6: //需要顺时针(向左)90度旋转 rotateImg(this, 'left', canvas); break; case 8: //需要逆时针(向右)90度旋转 rotateImg(this, 'right', canvas); break; case 3: //需要180度旋转 rotateImg(this, 'right', canvas); //转两次 rotateImg(this, 'right', canvas); break; } } else { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }

      

  • 相关阅读:
    虚拟空间,域名解析,A记录,MX记录,CNAME记录,TTL 等 更多Web服务器相关名词解释
    C# WinForm中的Label换行方法
    SQL 2005 with(nolock)详解
    常用Web Service汇总(天气预报、时刻表等)
    csdn中一篇sock 经验贴..
    如何保护.net中的dll文件(防破解、反编译)
    C#内存流示例>用内存流来读取图片
    QQ网页登陆密码加密方式(农场、空间、WebQQ等通用)
    MySQL数据库对dvbbs.php全文搜索的完全分析
    提搞网站访问速度可做哪些优化
  • 原文地址:https://www.cnblogs.com/peter-web/p/11646749.html
Copyright © 2020-2023  润新知