Примеры, как нарисовать на холсте canvas изображение по URL и из файла загруженного с локального компьютера.
<canvas id="canvas"></canvas>
<button id="btn">Загрузить изображение</button>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 450;
ctx = canvas.getContext('2d');
$('#btn').click(function(){
image = new Image();
image.src = '/demo/883/image.jpg';
image.onload = function(){
ctx.drawImage(image, 0, 0);
}
});
</script>Пример:
DrawImage может масштабировать изображение, для этого нужно указать желаемую ширину и высоту:
drawImage(image, x, y, width, height);А также вырезать часть изображения (crop):
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);Где, sx, sy, sWidth, sHeight – параметры фрагмента на источнике,
dx, dy, dWidth, dHeight – координаты и размеры на холсте.
<canvas id="canvas"></canvas>
<input type="file" id="btn">
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 450;
ctx = canvas.getContext('2d');
$("#btn").change(function(e){
var URL = window.webkitURL || window.URL;
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.src = url;
img.onload = function(){
ctx.drawImage(img, 0, 0);
}
});
</script>
