如何在canvas元素中获取整个图像？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在canvas元素中获取整个图像？相关的知识，希望对你有一定的参考价值。
我有一个canvas元素，想在里面加载一个entire图像。
画布最大宽度应为50％。
加载的图像具有不同的宽度和高度，但无论如何我需要整个图像而不仅仅是它们的一部分。
可能吗？
var URL = window.webkitURL || window.URL;
window.onload = function() {
var input = document.getElementById('input');
input.addEventListener('change', handleFiles, false);
}
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
}
img.src = url;
}#canvas{
max-width:50%;
}<input type="file" id="input"/>
<canvas id="canvas"/>答案
drawImage的第4和第5个参数是宽度和高度。下面的例子将占据整个画布。
var URL = window.webkitURL || window.URL;
window.onload = function() {
var input = document.getElementById('input');
input.addEventListener('change', handleFiles, false);
}
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
img.src = url;
}#canvas {
background-color: salmon;
max-width: 50%;
}<input type="file" id="input" />
<canvas id="canvas" />以上是关于如何在canvas元素中获取整个图像？的主要内容，如果未能解决你的问题，请参考以下文章