Загрузка изображения в Canvas JS

Примеры, как нарисовать на холсте canvas изображение по URL и из файла загруженного с локального компьютера.

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

Пример:

DrawImage может масштабировать изображение, для этого нужно указать желаемую ширину и высоту:

drawImage(image, x, y, width, height);
JS

А также вырезать часть изображения (crop):

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
JS

Где, sx, sy, sWidth, sHeight – параметры фрагмента на источнике,
dx, dy, dWidth, dHeight – координаты и размеры на холсте.

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

Пример:

07.10.2022
4550
Предыдущая запись Коды валют
Следующая запись Дополнения к функции in_array()

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как найти координаты конца отрезка JS/PHP
Найти координаты конца отрезка, если известны координаты начала, его длина и угол наклона можно по формулам:
3242
-1
Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
61478
+15
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
47473
+35
Как найти новые координаты точки при повороте изображения PHP-функцией imagerotate()
К примеру есть исходное изображение map.jpg с наложенной через HTML подсказкой в точке с координатами...
2352
-1
Определение основного цвета изображения в PHP
Определение доминирующего цвета фотографии дает возможность реализовать поиск изображений по цвету или сделать цветные...
11025
+5
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
15875
+3