Question

我有一个图像标签：

<img id="productPhoto0" src="...."></img>

稍后我从db加载一些URL，并希望对其进行加载并旋转。

        var element=document.getElementById("productPhoto0" );
        if(element) element.src=data.media.photos[k];
       //call rotation function here on load finish

我有这个https://github.com/exif-js/exif-js库，它可以工作，但是我找不到如何集成它的方法。

我想在图像加载到element

之后调用此函数

function rotateimg(src)
{

      //pass here my own image from above
         var image = new Image();
         image.src = src;
         image.onload = function() {
           EXIF.getData(image, function() {
              var orientation = EXIF.getTag(this, "Orientation");
              console.log(orientation);
              switch(orientation) {
                case 3:
                  node.css('transform', 'rotate(180deg)');
                  break;
                case 6:
                  node.css('transform', 'rotate(90deg)');
                  break;
                case 8:
                  node.css('transform', 'rotate(-90deg)');
                  break;
              }
          });
       };
}

这里他们使用了新图片，但是我想以某种方式将其传递给div元素并等待加载，然后执行旋转。

这不起作用：

//pass the element
function rotateimg(element)
{

 element.onload = function() {
        EXIF.getData(element, function() {

Answer 1

基本上，您只需使用 element 作为标识符，就无需使用多余的rotateImage函数，并将代码包装在if(element)块中。

var element=document.getElementById("productPhoto0" );    
if (element) {
      element.onload = function() {
        EXIF.getData(this, function() {
          var orientation = EXIF.getTag(this, "Orientation");
          console.log(orientation);
          switch (orientation) {
            case 3:
              node.css('transform', 'rotate(180deg)');
              break;
            case 6:
              node.css('transform', 'rotate(90deg)');
              break;
            case 8:
              node.css('transform', 'rotate(-90deg)');
              break;
          }
        });
      };
      element.src = data.media.photos[k];
    }

如何使用Exif库旋转图像？

1 个答案: