Сохранить холст HTML 5 в файл в Chrome?
Сохраните PNG (и т.д.). работа в этой демонстрации в Firefox, но не Chrome.
Преобразуйте в PNG (и т.д.). работа в Firefox и Chrome.
Существует ли путь *в Chrome* для сохранения образа элемента холста в локальный файл - или в сервер?
2 ответа
Самый простой способ сделать это - использовать функцию toDataURL () .
Допустим, у вас есть холст:
var canvas = document.getElementById("myCanvas");
Затем с помощью кнопки с идентификатором «saveButton» вы можете заставить его открывать новое окно с холстом в формате png, и пользователь может сохранить эту страницу.
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
Сэм Даттон: (относительно комментария, оставленного в ответе Тимоти Армстронга) Ошибка «SECURITY_ERR: DOM Exception 18», которую вы получаете, вероятно, связана с тем, что в ваш Canvas вы загрузили изображение, которое приходит из другого домена, например. возможно, изображение размещено на вашем сервере, поэтому вы видите ошибку локально, а не на вашем сервере. Каждый раз, когда вы загружаете изображения из чужого домена в Canvas, определенные вызовы API запрещаются по соображениям безопасности, например toDataUrl () и getPixelData (). Это похоже на ту же проблему политики происхождения, которую вы наблюдаете с междоменными вызовами Ajax.
Что касается SaveAs Canvas, реализация в браузере неоднородна. Я полагаю, что для браузеров, которые ее не поддерживают, холст может отображаться как изображение внутри тега . Просто установите атрибут src для данных, которые вы получаете от toDataUrl (), затем вы можете предложить пользователю щелкнуть правой кнопкой мыши -> сохранить как. Я считаю, что демонстрация в опубликованной вами ссылке делает это.