我是新的，只是学习HTML CSS和Javascript。我刚刚开始在这个过滤器的Web应用程序的实践工作。当我试图工作一个崇高的文本或Visual Studio的Javascript部分实际上不工作。我试图把正确的路径和其他东西，但它〉不显示任何图片上传到画布，但如果我复制粘贴此代码在codepen.io它工作正常！我不'我是新手，不知道发生了什么事，如果有人能帮我解释清楚，我将不胜感激，谢谢！
这是我的HTML CSS和JS代码：
let fileInput = document.getElementById("mainup");
fileInput.addEventListener("change", function (ev) {
if (ev.target.files) {
let file = ev.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function (ev) {
var canvas = document.getElementById("can1");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
};
};
}
});<html>
<head>
<title>Filtaro</title>
<link
rel="shortcut icon"
type="image/png"
href="C:\Users\ADMIN\Desktop\filtaro.png"
/>
</head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Pacifico&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="filter.css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Pacifico&display=swap"
rel="stylesheet"
/>
<script type="text/javascript" src="filter.js"></script>
//As my js file name was filter.js
<body>
<div class="bgimg"></div>
<div class="box">
<a href="file:///G:/HTML%20CSS%20JAVA/Project%20Filter/filter.html"
><h1>Filtaro</h1></a
>
</div>
<div class="intro">
<h2>Welcome to Filtaro !</h2>
<br />
<p>
Filter your images with different filters.No quality decrease ! Have Fun
!
</p>
</div>
<canvas id="can1"></canvas>
<canvas id="can2"></canvas><br />
<div class="btn">
<input type="file" id="mainup" multiple="false" accept="image/*" />
<label for="mainup" id="lab1">Upload a Picture</label>
</div>
<div class="btn">
<input type="button" id="maindown" onclick="download()" />
<label for="maindown" id="lab2">Download</label>
</div>
</body>
</html>
1条答案
按热度按时间rkue9o1l1#
把你的脚本放在body的末尾或者添加defer到script标签