javascript在画布中上传图像

【问题标题】：javascript upload an image in canvasjavascript在画布中上传图像
【发布时间】：2018-06-12 23:42:44
【问题描述】：

我尝试上传图像并将其绘制到画布中。我有按钮和画布的 html 代码以及 onchange 事件的 js 代码。我的代码不起作用，我没有任何错误可以弄清楚发生了什么。

【问题讨论】：

你期待什么结果，我试过了，图像正在画布内加载。您能否详细说明“什么不起作用”？
我有相同的代码，但在 js 和 html 的单独文件中（同一个文件夹）。我将它们与链接起来，而我的图像加载器没有发生任何事情
你是在<head>中添加脚本标签吗？
必须在正文末尾加上，否则不起作用。能否打开浏览器控制台查看日志中是否有错误？
在正文结束标记之前添加<script src="myFileName.js"></script>

【解决方案1】：

解决方法是在结束标记 </body> 之前的 body 末尾包含您的 scripts。

您的 html 代码将如下所示：

<html>
<body>
    <div id="buttonsDiv" >
        <input type="file" accept="image/*" title="Upload Image" class="normal-button" id="uploadBtn"/>            
    </div>
    <canvas id= "myImgCanvas" title="Drop an image here to upload" ></canvas>

    <script src="myFileName.js"></script>
</body>
</html>

请注意，您必须注意何时应该/不应该将脚本包含在 <head> 标记中，而不是将其包含在 </body> 标记的末尾。您可以查看此post 以获得最佳实践。

【讨论】：