Сохранить холст HTML 5 в файл в Chrome?

Question

Сохранение PNG (и т. Д.) Работает в , это демо в Firefox, но не в Chrome.

Преобразование в PNG (и т. Д.) Работы в Firefox и Chrome.

Есть ли способ * в Chrome * сохранить изображение элемента canvas в локальный файл - или всервер

Answer 1

Самый простой способ сделать это - использовать функцию toDataURL().

Скажем, у вас есть холст:

var canvas =  document.getElementById("myCanvas");

Затем с помощью кнопки с идентификатором «saveButton» можно открыть новое окно с холстом в виде png, и пользователь может сохранить эту страницу.

document.getElementById("saveButton").onClick = function() {
    window.open(canvas.toDataURL());
}

Answer 2

это может вам помочь: Холст в файл

Answer 3

Сэм Даттон: (относительно комментария, оставленного в ответе Тимоти Армстронга) Ошибка 'SECURITY_ERR: DOM Exception 18', которую вы получаете, вероятно, связана с тем, что в вашем Canvas вы загрузили изображение из другого домена, например.возможно, изображение размещено на вашем сервере, поэтому вы видите ошибку локально, а не на своем сервере.Всякий раз, когда вы загружаете изображения из чужого домена в Canvas, некоторые вызовы API запрещаются по соображениям безопасности, например toDataUrl () и getPixelData ().Это похоже на ту же проблему политики происхождения, с которой вы сталкиваетесь при междоменных вызовах Ajax.

Что касается SaveAs Canvas, реализация браузера не совсем корректна, для браузеров, которые ее не поддерживают, я полагаю, у вас все еще может быть холстпоявляются как изображение внутри тега <img />.Просто установите в атрибуте src данные, которые вы возвращаете из toDataUrl (), и вы можете пригласить пользователя щелкнуть правой кнопкой мыши -> сохранить как.Я полагаю, что демонстрация в ссылке, которую вы разместили, делает это.