在屏幕截图中放置画布答案

【问题标题】：Positioning a canvas inside a screenshot在屏幕截图中放置画布
【发布时间】：2017-04-05 23:10:50
【问题描述】：

我正在尝试在该指定位置放置画布。但它没有发生。我正在使用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() {
	  

  ctx.drawImage(img,10,10);  


  }
}

* {
  box-sizing: border-box;

}
.html{
	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 -->

【问题讨论】：

标签： javascript html css html5-canvas jsfiddle

【解决方案1】：

答案是在css中使用透视： perspective: 1000px;

有关此检查的更多信息：https://css-tricks.com/almanac/properties/p/perspective/。我希望这会有所帮助！

【讨论】：