-1
我正试图在该指定位置放置画布。但它没有发生。 我正在使用JavaScript并在客户端上传图像。我尝试了许多方法，如画布旋转，转换。但实际上，我需要一个小对齐的画布或转换一下。我也分享了图片，并分享了我的js小提琴代码。所以请帮助我解决这个问题...... !!!在屏幕截图中放置画布
的形象在这里的链接： 
var input = document.getElementById('fileinput');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function() {
\t
ctx.drawImage(img,10,10);
}
}* {
box-sizing: border-box;
}
.html{
\t height:100%;
}
.header
{
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
height:500px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
height:500px;
background-color:red;
background-image: url("../img/img.jpg") ;
background-size: 100% 100%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}<div class="header">
<center>
<h1>Test</h1></center>
<input type="file" id="fileinput" />
</div>
<div class="clearfix">
<div class="column menu">
</div>
<div class="column content">
<canvas width="400" height="300" id="canvas" />
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->