При работе с графикой в браузере, часто не обойтись без использования тега canvas. В данной статье речь пойдет о том, как конвертировать изображение в тег canvas или как преобразовать содержимое тега canvas в изображение.
При работе с графикой в браузере, часто не обойтись без использования тега canvas. В данной статье речь пойдет о том, как конвертировать изображение в тег canvas или как преобразовать содержимое тега canvas в изображение.
Для преобразования изображения в тег canvas, необходимо использовать метод drawImage, предоставляемый контекстом элемента canvas:
// Конвертирует изображение в canvas
// параметр image – это ссылка на изображение в html документе
function convertImageToCanvas(image) {
var cnvs = document.createElement("canvas");
cnvs.width = image.width;
cnvs.height = image.height;
cnvs.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
Аргументы 0, 0 соответствуют координатам на холсте, где должно быть размещено изображение.
Преобразование тега сanvas в изображение
Обратите внимание на тот факт, что функция convertCanvasToImage должна иметь параметр callback, представляющий собой функцию обратного вызова, поскольку для загрузки данных в параметр src, требуется некоторое время. Таким образом, возвращенное изображение может быть пустым.
// конвертирование canvas в изображение
function convertCanvasToImage(canvas, callback) {
var image = new Image();
image.onload = function() {
image.src = canvas.toDataURL("image/png");
image.crossOrigin = "anonymous";
}
callback(image);
}
В функции callback можно выполнить AJAX запрос на сервер, для сохранения данных в файл.
Вот так просто происходит конвертирование canvas в изображение и обратно!
