Как отправить данные HTML <canvas>на сервер

Question

Похоже, существует два способа отправки <canvas> данных на сервер.Одним из них является использование canvas.getImageData() для получения массива пикселей и их 8-битных значений цвета.Другой метод - использовать canvas.toDataURL()) для отправки вложения файла.Этот метод продемонстрирован здесь .

Я хочу создать сайт, на котором люди смогут сохранять свои рисунки на холсте.Какой метод будет более масштабируемым и быстрым для моих пользователей?

Answer 1

Чтобы открыть параметры: Используя fabric.js, вы можете сериализовать ваш fabric.js canvas в JSON.

Он не только предоставляет дополнительный уровень возможностей редактирования, но и позволяетвыполните следующее (не говоря уже о возможности редактировать их изображения на более позднем этапе):

var canvas = new fabric.Canvas('c');
canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);

Теперь, когда вы хотите сериализовать этот холст, вы просто вызываете функцию JSON.stringify на объекте полотна ткани;

JSON.stringify(canvas);

Что дает нам что-то вроде следующего для нашего примера выше:

{
    "objects": [
        {
            "type": "rect",
            "left": 100,
            "top": 100,
            "width": 50,
            "height": 50,
            "fill": "#f55",
            "overlayFill": null,
            "stroke": null,
            "strokeWidth": 1,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "selectable": true
        },
        ...
    ]
}

---

Де-сериализация холста обратно в его состояние изменяется наиспользуя:

var canvas = new fabric.Canvas('c');
canvas.loadFromJSON(yourJSONString);

---

Некоторые дополнительные ресурсы:

Демонстрация кухонной раковины - Просмотр возможностей fabric.js (включая бесплатное рисование; изменение размера ипозиция свободного рисунка впоследствии)

Домашняя страница

Answer 2

Попробуйте, это работает для меня в том же случае: -

, чтобы получить данные json для всего холста JSON.stringify(canvas);

и снова загрузить из json, используйте код ниже: -

canvas.clear();
canvas.loadFromJSON(json_string,canvas.renderAll.bind(canvas));

Answer 3

Вы можете .toDataURL () it

var datastring = document.getElementById('mycanvas').toDataURL("image/png"));

или с помощью jQuery

var datastring = $('#mycanvas')[0].toDataURL("image/png");

И затем отправить эту строку на сервер через XHR, которыйдолжен быть самым быстрым.