p5.js 图片未显示
p5.js Image Not Showing
所以我用 p5.js 制作了一个图像编辑应用程序。我上传了一张图片到 postimages.org(imgur 不工作)。它实际上加载了图像(我在网络选项卡中看到过)但我看不到它。这是 link:https://i.postimg.cc/d3N4VF2G/npestastare.png
这是我的 html 代码:
<h1>Image Editor</h1>
<main class="hidden"></main>
<div id="load">
<p>Load Image:</p>
<input type="text" id="file" placeholder="image link" />
<button onclick="imageLoaded()">Load</button>
</div>
<div id="editor-shapes" class="flex"></div>
<div id="editor-metadata" class="flex"></div>
<div id="editor-color" class="flex">
<input type="color" id="col1" /><input type="color" id="col2" />
</div>
这是我的 js 代码:
function setup() {
createCanvas(400, 400)
}
function draw() {}
function imageLoaded() {
document.querySelector('main').classList.remove('hidden')
document.querySelector('#load').classList.add('hidden')
const img = loadImage(document.querySelector('#file').value)
console.log(img)
image(img, 0, 0, 400, 400)
}
您正在尝试在实际加载图像之前渲染图像。您应该将 image
调用放在 image
函数的 successCallback
参数中。
function imageLoaded() {
document.querySelector('main').classList.remove('hidden')
document.querySelector('#load').classList.add('hidden')
const url = document.querySelector('#file').value;
loadImage(url, (img) => image(img, 0, 0, 400, 400));
}
所以我用 p5.js 制作了一个图像编辑应用程序。我上传了一张图片到 postimages.org(imgur 不工作)。它实际上加载了图像(我在网络选项卡中看到过)但我看不到它。这是 link:https://i.postimg.cc/d3N4VF2G/npestastare.png
这是我的 html 代码:
<h1>Image Editor</h1>
<main class="hidden"></main>
<div id="load">
<p>Load Image:</p>
<input type="text" id="file" placeholder="image link" />
<button onclick="imageLoaded()">Load</button>
</div>
<div id="editor-shapes" class="flex"></div>
<div id="editor-metadata" class="flex"></div>
<div id="editor-color" class="flex">
<input type="color" id="col1" /><input type="color" id="col2" />
</div>
这是我的 js 代码:
function setup() {
createCanvas(400, 400)
}
function draw() {}
function imageLoaded() {
document.querySelector('main').classList.remove('hidden')
document.querySelector('#load').classList.add('hidden')
const img = loadImage(document.querySelector('#file').value)
console.log(img)
image(img, 0, 0, 400, 400)
}
您正在尝试在实际加载图像之前渲染图像。您应该将 image
调用放在 image
函数的 successCallback
参数中。
function imageLoaded() {
document.querySelector('main').classList.remove('hidden')
document.querySelector('#load').classList.add('hidden')
const url = document.querySelector('#file').value;
loadImage(url, (img) => image(img, 0, 0, 400, 400));
}