Question

我正在尝试使用JavaScript打开图像文件。它在Chrome上成功运行（没有显示错误），但图像拒绝在我的iPhone上显示。这是因为图像太大（就像DATA网址太长了）？

我的代码使用FileReader，获取img.src，并将其作为img标记输出，如下所示：

＆＃13;

if(window.FileReader) {   //do this
  $('input').change(function() {
    	$("#result").html("SELECTING IMAGE ... ... ...");
      var fr = new FileReader;

      fr.onload = function() {
          var img = new Image;

          img.onload = function() { 
              //I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
              $.ajax({url: img.src, async: true, success: function(result){
              		$("#result").html("<img src='ajax-loader.gif' />");
              		setTimeout(function(){
                		$("#result").html("<img src='" + img.src + "' /> <br/> <br/>" + "<a href='" + img.src + "'>View in browser</a>");
                    console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
              		}, 1000);
          		}});
          		
          		
          };
          
          img.src = fr.result;
      };
      
      fr.readAsDataURL(this.files[0]);
      
  });

} else {
  alert("You don't support FileReader");
}

＆＃13;

<html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <title>iViewr</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body cz-shortcut-listen="true">
  <div onclick="document.getElementById('iPUT').style.opacity=0.01">
    <button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
    <button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
    <button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
    <br>
    </div>
    <div id="inputDIV" onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id="iPUT" accept="image/*" capture="camera" style="opacity: 0.5;"></div>
    <div id="result">Please choose a file to view it.</div>
    <script src="index.js"></script>

  
</body></html>

＆＃13;

您可以在此处查看：http://iviewr.neocities.org/

提前致谢！

Answer 1

在输入选择的文件上使用URL.createObjectURL（），如下所示。致@dandavis。

$('input').change(function(){
  var resultPreview = document.getElementById('result');
  var file = document.querySelector('input[type=file]').files[0]; //selects the very first file
  
  var fr = new FileReader();
  
  fr.addEventListener('load', function(){
    //once the FileReader is loaded,
    resultPreview.src = fr.result;
    console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
    document.getElementById('help').innerHTML="You can choose another image by tapping the screen again.";
  }, false);
  
  if (file){ //if there even is a first file
    fr.readAsDataURL(file); //don't want to mess with Data URLs!! this calls the function above
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <title>iViewr</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
  <div onclick="document.getElementById('iPUT').style.opacity=0.01">
    <button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
    <button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
    <button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
    <br />
    </div>
    <div id='help'>Tap the middle of the screen to select an image for the computer to guess.</div>
    <div id='inputDIV' onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id='iPUT' accept="image/*" capture="camera"></div>
    <img id='result' src=''/>
    <script src='index.js'></script>

  </body>
</html>

从JavaScript打开图像文件（不能在手机上工作）

1 个答案: