Как сохранить содержимое Canvas в изображение?

Пользователь

от charles.orn , в категории: Другие , год назад

Как сохранить содержимое Canvas в изображение?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от richie_mayert , год назад

@charles.orn 

Существует несколько способов сохранения содержимого Canvas в изображение:

  1. С помощью метода toDataURL():
1
2
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL('image/png');


  1. С помощью метода toBlob():
1
2
3
4
var canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
    saveAs(blob, 'myCanvas.png');
});


В этом примере используется библиотека FileSaver.js, которая позволяет сохранять файлы на компьютер пользователя.

  1. С помощью серверной части.


Вы можете отправить содержимое Canvas на сервер и там затем сохранить его в файл изображения, используя язык программирования, такой как PHP, Python или Ruby.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL('image/png');

$.ajax({
    type: 'POST',
    url: 'save-canvas.php',
    data: { image: dataURL },
    success: function() {
        alert('Image saved!');
    }
});


Здесь мы отправляем содержимое Canvas на серверную страницу save-canvas.php с помощью метода POST и сохраняем его в файл изображения.