Question

免责声明：我还是JavaScript的新手。（对于那个问题，一般来说就是编程。）

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

我正在使用JavaScript的File API来避免上传/下载。值得注意的是，我正在Google Apps脚本上做所有事情，因此它可以是一个易于访问的网络应用程序。

现在，import list_module class Calculator(object): tile_chart = list_module.tile_sizes def __init__(self, dims_string): self.dims_string = dims_string self.grout_choice_input = input('Input grout thickness.\n>') self.grout_choice = self.grout_choice_input.strip('\"') def main(self): if self.dims_string in self.tile_chart: self.my_tile_size = self.tile_chart.get('dims_string') self.grout_line_index = self.grout_lines.index(self.grout_choice) return self.my_tile_size[self.grout_line_index] else: print("not configured yet") calculator_instance = Calculator(table_str) print(Calculator.tile_chart) print(calculator_instance.tile_chart) calculator_instance.main()中有<img>，所以我可以使用replaceChild。这是我能够让它发挥作用的唯一方法。你可以看到它here on CodePen。这是我一直在使用的功能：

<div>

我尝试了什么：

我尝试让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);中 - 我猜是因为该函数只创建了一个FileReader。

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

imgTwo

然后，我尝试制作整个function repeatImg(){ var repeatImage = document.getElementById('userImg').src; document.getElementById('imageOne').src = repeatImage; document.getElementById('imageTwo').src = repeatImage; }函数的倍数，并使用事件监听器调用它们，但这也不起作用。

有没有办法实现这个目标？

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

只需包装原始文件对象（即blob），并将其设置为源。这样就可以避免像数据URL一样增加内存使用和base64编码/解码开销 - 也不需要创建中间图像元素 - 只需更新现有图像元素上的src： / p>

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在多个位置显示一个图像

2 个答案: