Question

TensorFlowJS可以从HTML加载图像，但通常不能从JavaScript生成的图像对象加载图像。

代码如下所示。第一组加载方法可以从HTML加载图像。

h = document.getElementById("dandelion");
let image1 = await tf.browser.fromPixels(h);
var x1 = document.createElement("CANVAS");
tf.browser.toPixels(image1, x1);
document.body.append(x1);

第二组加载方法将生成一个online_img，其中包含指向在线图像的链接。但是，当我尝试绘制加载的图像时，我只有一个黑色正方形。

let online_img = await document.createElement("IMG"); 
online_img.setAttribute("id", "loaded_image")
online_img.setAttribute("src", str);
online_img.setAttribute("width", "200");
online_img.setAttribute("height", "100");
await document.body.appendChild(online_img);
let image = await tf.browser.fromPixels(online_img);
var x = document.createElement("CANVAS");
tf.browser.toPixels(image, x);
document.body.append(x);

所以我想知道是否有任何方法可以通过第二组方法成功加载图像。

谢谢！！

完整的HTML代码在此处显示。

<html>
<script src="https://unpkg.com/@tensorflow/tfjs"> </script>
<head></head>
<body>
 <img id="dandelion" crossorigin height="320" width="480" src="https://images-na.ssl-images-amazon.com/images/I/719fF478nPL._SX425_.jpg"></img>
</body>
<script>
async function getImage_online(str){
  // load and draw from html: success. 
//   const image1 = tf.browser.fromPixels(dandelion);
  h = document.getElementById("dandelion");
  let image1 = await tf.browser.fromPixels(h);
  var x1 = document.createElement("CANVAS");
  tf.browser.toPixels(image1, x1);
  document.body.append(x1);

  // load the image from generated image: loaded image is black. 
  let online_img = await document.createElement("IMG"); 
  online_img.setAttribute("id", "loaded_image")
  online_img.setAttribute("src", str);
  online_img.setAttribute("width", "200");
  online_img.setAttribute("height", "100");
  await document.body.appendChild(online_img);
  let image = await tf.browser.fromPixels(online_img);
  var x = document.createElement("CANVAS");
  tf.browser.toPixels(image, x);
  document.body.append(x);

}

async function newRun_online(){
  let c = await getImage_online("https://images-na.ssl-images-amazon.com/images/I/719fF478nPL._SX425_.jpg"); // c: rose
}

newRun_online(); 

</script>
</html>

Answer 1

由于图像尚未完成加载，因此无法加载图像。

image.onload = () => {
  tf.browser.toPixels(image, x);
}

TensorFlowJS无法加载JS生成的图像

1 个答案: