三天以来我一直在寻找， 我如何使用 vanilla javascript 创建一个按钮来在 HTML5 Canvas 中打开图片。
我对这段代码进行了更改和重新更改，但始终无法正常工作， 通常，打开我的图片一次，如果我重新单击按钮，就会出现错误， 如果我重新启动脚本是否有效，在有效的那一刻我放置了一个警报()， 在“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>
最佳答案
尝试一下下面的代码。
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 );
}
关于javascript - JS && HTML5 如何在不同宽度和高度的 Canvas 中动态打开图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51760474/