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);。

实际上我不知道它为什么会这样，但现在它已修复。

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

1 个答案: