-1
나는 그 지정된 장소에 캔버스를 넣으려고합니다. 그러나 그것은 일어나지 않습니다. 자바 스크립트를 사용하고 클라이언트 측에서 이미지를 업로드하고 있습니다. 캔버스 회전, 변형과 같은 여러 방법을 시도했습니다. 하지만 사실, 조금 정렬 된 캔버스가 필요하거나 조금 변형되었습니다. 나는 또한 이미지를 공유하고 나의 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 -->