我如何在画布标签内渲染图像?

Question

我试图在画布内渲染图像，然后我可以处理它，问题是，有时图像渲染，有时不，我错过了什么，还是这是一些与异步相关的东西?提前谢谢你。

这是我使用的JavaScript。

let image, canvas, context;
const init = () => {
image = document.getElementById('original');
canvas = document.getElementById('result');
// Set canvas properties
canvas.width = image.width;
canvas.height = image.height;
// Create canvas context
context = canvas.getContext('2d');
image.addEventListener('load', threshold);
}
const threshold = () => {
context.drawImage(image, 0, 0, image.width, image.height);
const frame = context.getImageData(0, 0, image.width, image.height);
for (let i = 0; i < frame.data.length; i++) {
// pixels logic
}
context.putImageData(frame, 0, 0);
}
document.addEventListener('DOMContentLoaded', init);

这是我的HTML。

<main>
<div class="column">
<img src="../img/landscape.jpeg" id="original">
</div>
<div class="column">
<canvas id="result"></canvas>
</div>
</main>
<script src="../javascript/threshold.js"></script>

Answer 1

我通过这样做来修复它

window.addEventListener('load', () => {
time = document.getElementById('time');
image = document.getElementById('input');
canvas = document.getElementById('output');
// Create canvas context
context = canvas.getContext('2d');
image.onload = threshold();
});

我将事件侦听器添加到window而不是document，并且为了等待图像加载，我使用了这个image.onload = threshold();而不是image.addEventListener('load', threshold);。

实际上我不知道为什么它是这样的行为，但现在它是固定的。