在屏幕截图中定位 canvas

Question

我正在尝试在指定位置放置 canvas。但它没有发生。我正在使用 javascript 并在客户端上传图像 - side.I 尝试了很多方法，例如 canvas 旋转，变换。但实际上，我需要稍微对齐 canvas 或稍微变形一下。我还分享了图片并分享了我的 js fiddle 代码。所以请帮我解决这个问题...!!!

图片link 此处：

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 -->

Answer 1

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

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

在屏幕截图中定位 canvas

Positioning a canvas inside a screenshot

html

javascript

css

jsfiddle

html5-canvas