反应中的图像方向

时间:2018-07-20 00:28:07

标签: reactjs image svg orientation

我正在使用此逻辑来处理图像方向,但不适用于Samsung J7手机,此逻辑不起作用,

我研究了用于此版本的几种方法,但都不符合我的工作。 (我正在使用React和svg图像)

我尝试安装多个名称相同的软件包,但没有用

loadImage(url,cb){
    //console.log("indo", url);

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';


    var comp = this;

    console.log("comp", comp);

    xhr.onload = function(e) {
      //console.log("RET", cb);

      const rotation = {
         1: 'rotate(0deg)',
         3: 'rotate(180deg)',
         6: 'rotate(90deg)',
         8: 'rotate(270deg)',
         12: 'rotate(90deg)',
        };




      if (e.target.status == 200) {

          var base64img = "data: image/*;base64," + comp.arrayBufferToBase64(e.target.response);
          var scanner = new DataView(this.response);

          console.log("Scanner", comp );
          var idx = 0;
          var value = 1; // Non-rotated is the default

           if (e.target.length < 2 || scanner.getUint16(idx) != 0xFFD8) {
             // Not a JPEG
             console.log("Rotatnionaaaa", e.target.length);
             if (cb){

              return cb({imgbase64:base64img, imgRotation:rotation[value],rotation:value});
            }

            else
              return;

           }
           idx += 2;
           var maxBytes = scanner.byteLength;
           while (idx < maxBytes - 2) {
             var uint16 = scanner.getUint16(idx);


             idx += 2;

             switch (uint16) {
               
               case 0x0112: // Orientation tag
                 // Read the value, its 6 bytes further out
                 // See page 102 at the following URL
                 // http://www.kodak.com/global/plugins/acrobat/en/service/digCam/exifStandard2.pdf
                 value = scanner.getUint16(idx + 6, false);
                 maxBytes = 1; // Stop scanning
                 break;
               case 0xFFE1: // Start of EXIF
                 var exifLength = scanner.getUint16(idx);
                 maxBytes = exifLength - idx;
                 idx += 2;
                 break;
             }
           }

           //return comp.setState({imgbase64:base64img, imgRotation:value, showLoading:false});
           if (cb)
            return cb({imgbase64:base64img, imgRotation:rotation[value],rotation:value});
          else
            return;

     }else{
       if (cb)
        return cb({imgbase64:base64img, imgRotation:rotation[value],rotation:value});
      else
        return;
     }

    };
    xhr.send();
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

有人可以帮助我吗?

0 个答案:

没有答案