-1
私はその指定された場所にキャンバスを置こうとしています。しかし、それは起こっていません。 私はJavaScriptを使用して、クライアント側で画像をアップロードしています。キャンバスの回転、変形などの多くの方法を試しました。実際には、ちょっとしたキャンバスが必要か、ちょっと変わってしまいました。私も画像を共有して、私のjsのフィドルコードを共有しました。だから私はこのことを手伝ってください... !!!ここスクリーンショット内にキャンバスを配置する
画像リンク： perspective: 1000px;
このチェックアウトの詳細については：https://css-tricks.com/almanac/properties/p/perspective/ 
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 -->