在多个位置显示一个图像

Question

免责声明：我对 JavaScript 还是很陌生。（就此而言，对于一般编程而言。）

因此，我正在尝试创建一个界面，当按 object-fit: cover 裁剪时，该界面将以多种纵横比显示图像。我希望并排查看多个纵横比，并且还能够测试不同的图像。

我正在使用 JavaScript 的文件 API 来避免 uploading/downloading。还值得注意的是，我在 Google Apps Script 上做所有事情，因此它可以成为一个易于访问的网络应用程序。

现在，我在 <div> 中有 <img>，所以我可以使用 replaceChild。这是我能够让它工作的唯一方法。你可以看到它here on CodePen。这是我一直在使用的功能：

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            var placehold = document.getElementById('userImg');
            document.getElementById('userImageDiv').replaceChild(img, placeHold);
        }
        img.id = "userImg";
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

我试过的：

我尝试让 img.onload 函数追加 img 两次：

var placeholdTwo = document.getElementById('imgTwo');
document.getElementById('imageTwoDiv').replaceChild(img, placeholdTwo);

但它只显示在 imgTwo - 我猜是因为该函数只创建一个 FileReader。

我也试过在一个位置读取图像，然后将它的 src 复制到其他位置，但没有成功：

function repeatImg(){
    var repeatImage = document.getElementById('userImg').src;
    document.getElementById('imageOne').src = repeatImage;
    document.getElementById('imageTwo').src = repeatImage;
}

然后，我尝试制作整个 handleImage 函数的倍数并使用事件侦听器调用它们，但这也没有用。

有什么办法可以做到吗？

Answer 1

查看链接笔，userImgDiv 更改事件侦听器未调用 repeatImg。

在 img.onload 结束时调用 repeatImg() 对我有用。

img.onload = function(){
            var placeHold = document.getElementById('userImg');
            document.getElementById('userImageDiv').replaceChild(img, placeHold);
            repeatImg();
        }

CodePen.

Answer 2

您只使用了一张图片。我会做这样的事情：

/* external.js */
//<![CDATA[
var doc, bod, M, I, Q, S, old = onload; // for use on other loads
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
Q = function(selector, withinElement){
  var w = withinElement || doc;
  return w.querySelectorAll(selector);
}
S = function(selector, withinElement){
  var w = withinElement || doc;
  return w.querySelector(selector);
}
I('form').onsubmit = function(){
  return false;
}
// you can put the below code on another page onload if you want
var up = I('upload'), out = I('out'), reader = new FileReader;
up.onchange = function(){
  reader.onload = function(){
    var img0 = M('img'), img1 = M('img');
    img0.src = img1.src = this.result; out.innerHTML = '';
    out.appendChild(img0); out.appendChild(img1);
  }
  reader.readAsDataURL(this.files[0]);
}
}
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#000; overflow-y:scroll;
}
.main{
  width:940px; background:#ccc; padding:20px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <form id='form' name='form'>
      <input id='upload' name='upload' type='file' />
    </form>
    <div id='out'></div>
  </div>
</body>
</html>

Answer 3

我想也许我遗漏了什么，但为什么不直接在 img.onload 方法中设置图像源呢？

function handleImage(e){
  var reader = new FileReader();
  reader.onload = function(event){
      var img = new Image();
      img.onload = function(){
          var placehold = document.getElementById('userImg');
          document.getElementById('userImageDiv').replaceChild(img, placeHold);
          document.getElementById('imageOne').src = img.src;
          document.getElementById('imageTwo').src = img.src;
      }
      img.id = "userImg";
      img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

Answer 4

简单地包装原始文件对象，它是一个 blob，并将其设置为源。通过这种方式，您可以避免像使用 Data-URL 那样增加内存使用量和 base64 encoding/decoding 开销 - 也不需要创建中间图像元素 - 只需更新现有元素的 src 即可：

document.querySelector("input").onchange = handleImage;

function handleImage() {
  var url = URL.createObjectURL(this.files[0]);
  document.getElementById('userImg').src =
  document.getElementById('imageOne').src =
  document.getElementById('imageTwo').src = url;
}

<label>Select an image: <input type=file></label>
<img id=userImg>
<img id=imageOne>
<img id=imageTwo>

在多个位置显示一个图像

Displaying one image in multiple locations

javascript

filereader