0

我正在使用 imgix 构建一个简单的照片编辑器应用程序，并且我希望在用户输入字段接收值时更新图像 src 属性。有没有办法将我的新参数附加到 src url 的末尾？

我已经能够使用模板文字来创建新的 url，但是我无法弄清楚如何或是否可以在用户键入时更新图像 src。或者，如果这样做的唯一方法是提交更改并在页面重新加载时显示新图像。我已经尝试将 image.src 重新分配给新的 url，但这并没有奏效。

HTML:

<form id="form" class="input-container">
  <input type="text" placeholder="Enter Text" id="title"/>
  <input type="text" placeholder="Enter Hexcode Color" id="overlay" />
  <input type="submit" value="Apply Changes" id="edit-submit">
</form>


JavaScript:
let form = document.getElementById("form");
let titleInput = document.getElementById("title");
let encodedTitle = encodeURI(titleInput);
let overlayColor = document.getElementById("overlay");
let image = document.getElementById("image");
let timeout = null;

form.onkeyup = function(e) {
  let encodedTitle = "&txt=" + encodeURI(titleInput.value);
  let newColor = "&blend=" + overlayColor.value;
  let url = new URL(`${image.src}`);
  url = `${url}${encodedTitle}${newColor}`;
  console.log(url);
  document.getElementById("url-result").value = url;
  image.src = url;
};

我能够获取这些值，但我还没有弄清楚我需要做什么才能将它应用到 img src url。

4

1 回答 1

0

您的代码更改了图像的 URL，但每次键入时 URL 会变得越来越长。

看看这个片段 - 也许它有帮助。

let form = document.getElementById("form");
let titleInput = document.getElementById("title");
let encodedTitle = encodeURI(titleInput);
let overlayColor = document.getElementById("overlay");
let image = document.getElementById("image");
let timeout = null;

// URL base for your image - so it doesn't get longer-and-longer
// with each keyup
let baseURL = image.src

// just a display element, so you can see the URL created
let display = document.getElementById('new-url')

form.onkeyup = function(e) {
  const newURL = `${baseURL}&txt=${encodeURI(titleInput.value)}&blend=${overlayColor.value}`
  document.getElementById("url-result").value = newURL;
  image.src = newURL
  display.textContent = newURL
};
img {
  width: 100px;
  height: 100px;
}
<img id="image" src=""><br />
<label for="url-result">URL Result:
<input type="text" id="url-result">
</label>
<div>Display new URL: <span id="new-url"></span></div>
<form id="form" class="input-container">
  <input type="text" placeholder="Enter Text" id="title" />
  <input type="text" placeholder="Enter Hexcode Color" id="overlay" />
  <input type="submit" value="Apply Changes" id="edit-submit">
</form>

于 2019-08-11T17:29:33.767 回答