Javascript 从Base64转换图像时出错-HTMLImageElement已损坏_Javascript_Php_Html

Javascript 从Base64转换图像时出错-HTMLImageElement已损坏

javascript php html

Javascript 从Base64转换图像时出错-HTMLImageElement已损坏,javascript,php,html,Javascript,Php,Html,我试图加载一个图像，并通过PHP将其转换为二进制数据，然后解码数据，并通过Javascript将其加载到HTML5画布上。但是，我遇到了以下错误： Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. 这是我所有的代码，PHP的唯一一点是前端。请注意，我也尝试过

我试图加载一个图像，并通过PHP将其转换为二进制数据，然后解码数据，并通过Javascript将其加载到HTML5画布上。但是，我遇到了以下错误：

Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

这是我所有的代码，PHP的唯一一点是前端。请注意，我也尝试过使用btoa方法。在试图找到解决问题的方法时，我在stackoverflow上找到了hexToBase64方法

<?php
    $image_data = file_get_contents('test.png');
    $encoded_image = base64_encode($image_data);
    $btoa = "hexToBase64('" . $encoded_image . "')";
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Experimental Reader</title>
    </head>

    <body>
        <canvas id="reader" width="100%" height="100%">Whoah, your browser is old! You need to update it to use our reader.</canvas>
    </body>

    <script>
        window.onload = function() {
            var canvas  = document.getElementById("reader");
            var ctx     = canvas.getContext("2d");
            var image   = document.createElement('img');
            image.src='data:image/png;base64,' + <?php echo $btoa; ?>;
            ctx.drawImage(image, 0, 0);
        }

        function hexToBase64(str) {
            return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
        }
    </script>
</html>

您的代码应该如下所示：

<?php
    $image_data = file_get_contents('test.png');
    $encoded_image = base64_encode($image_data);
    $btoa = "hexToBase64('" . $encoded_image . "')";
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Experimental Reader</title>
    </head>

    <body>
        <canvas id="reader" width="100%" height="100%">Whoah, your browser is old! You need to update it to use our reader.</canvas>
    </body>

    <script>
        var canvas;

        window.onload = function() {
            canvas       = document.getElementById("reader");
            var image    = document.createElement('img');
            image.onload = imageLoaded;
            image.src='data:image/png;base64,' + <?php echo $btoa; ?>;
        }

        function hexToBase64(str) {
            return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
        }

        function imageLoaded(evnt) {
            //after successful image loading we can draw it
            var ctx     = canvas.getContext("2d");
            ctx.drawImage(evnt.target, 0, 0);
        }
    </script>
</html>

您需要确保图像已加载。数据URL是快速的，而不是即时的。首先让它在一个硬编码但隐藏的标记中工作，然后继续使它成为动态的。@dandavis，即使使用image.onload方法，这也不能解决问题。如果图像应该在HTML5画布上呈现，我应该如何使用隐藏标记来实现这一点？您找到解决方案了吗？我正在从javascript加载dataURL，我有两个问题：1-onload没有被触发，2-当我在超时2秒后强制加载它时，它告诉我映像已损坏：@timistrone-在我的情况下，问题是映像尚未加载。加载dataURL并使用回调。对不起，我没有代码显示了。