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

@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 и сохраняем его в файл изображения.