Javascript JS&&；HTML5如何在不同宽度和高度的画布中动态打开图片_Javascript_Canvas

Javascript JS&&；HTML5如何在不同宽度和高度的画布中动态打开图片

javascript canvas

Javascript JS&&；HTML5如何在不同宽度和高度的画布中动态打开图片,javascript,canvas,Javascript,Canvas,我在寻找，三天以来，我如何创建一个按钮，用香草javascript在HTML5的画布上打开图片我有一个我不断修改的代码，但它永远不会正常工作，通常情况下，打开我的图片一次，如果我再次点击我的按钮，我会出错，如果我重新启动该脚本，无论是否有效，在有效的一刻，我会发出警报（），在“reader.addEventListener”中，我没有正确理解addEventListener，我正在重新阅读文档 <!DOCTYPE html> <html> <hea

我在寻找，三天以来，我如何创建一个按钮，用香草javascript在HTML5的画布上打开图片

我有一个我不断修改的代码，但它永远不会正常工作，通常情况下，打开我的图片一次，如果我再次点击我的按钮，我会出错，如果我重新启动该脚本，无论是否有效，在有效的一刻，我会发出警报（），在“reader.addEventListener”中，我没有正确理解addEventListener，我正在重新阅读文档

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" >
    </head>
    <body>
        <canvas id="canvasToDraw"></canvas>
        <input type="file" onclick="openPicture()"></input>
        <script>
        function openPicture()
        {
            var file = document.querySelector('input[type=file]').files[0];
            var reader  = new FileReader();



            reader.readAsDataURL(file);
            // 
            img = new Image();
            img.id = "bufferPicture";
            document.body.appendChild( img);

            reader.addEventListener('load', function() {                        
                    img.src = ""+reader.result;

            var height = img.height;
            var width = img.width;

            document.getElementById("canvasToDraw").width = width;
            document.getElementById("canvasToDraw").height = height;

            var contextCanvas = document.getElementById("canvasToDraw").getContext("2d");
            contextCanvas.drawImage(    document.getElementById("bufferPicture"), 0, 0  );
            });


            // remove the picture
            // document.body.removeChild(document.getElementById("bufferPicture"));
        }
        </script>
    </body>
</html>


函数openPicture（）
{
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.readAsDataURL（文件）；
// 
img=新图像（）；
img.id=“缓冲图片”；
文件.正文.附件（img）；
reader.addEventListener（'load'，function（）{
img.src=”“+reader.result；
var高度=img高度；
变量宽度=img.width；
document.getElementById（“canvasToDraw”）.width=width；
document.getElementById（“canvasToDraw”）。高度=高度；
var contextCanvas=document.getElementById（“canvasToDraw”）.getContext（“2d”）；
drawImage（document.getElementById（“bufferPicture”），0,0；
});
//删除图片
//document.body.removeChild（document.getElementById（“bufferPicture”）；
}

试试下面的代码

img.src = ""+reader.result;
img.onload = function() {
    var height = img.height;
    var width = img.width;

    document.getElementById("canvasToDraw").width = width;
    document.getElementById("canvasToDraw").height = height;

    var contextCanvas = document.getElementById("canvasToDraw").getContext("2d");
    contextCanvas.drawImage(    document.getElementById("bufferPicture"), 0, 0  );
}

什么是document.getElementById（“bufferPicture”）？你想画“img”对吗？文档。getElementById（“bufferPicture”）没有用，我将删除这一行。谢谢，我跟随了链接，这对我很有帮助。