gpt4 book ai didi

javascript - TensorFlowJS 无法加载 JS 生成的图像

转载 作者:行者123 更新时间:2023-11-28 03:18:19 24 4
gpt4 key购买 nike

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 ,其中包含在线图像的链接。但是当我尝试绘制加载的图像时,我只得到一个黑色方 block 。

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>

最佳答案

图像加载失败,因为图像之前尚未完成加载。

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

关于javascript - TensorFlowJS 无法加载 JS 生成的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59433143/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com