Захватить холст HTML как gif / jpg / png / pdf?
M odel будет вашим ManagedBean
V iew будет jsp, XHTML (ну вы можете вместить различные виды здесь)
C ontroller будет FacesServlet
Обновить, надеюсь, что это изображение поможет больше
[/g0]
3 ответа
Упс. Оригинальный ответ относился к аналогичному вопросу. Это было исправлено:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
со значением в IMG вы можете записать его как новое изображение, например:
document.write('<img src="'+img+'"/>');
Это - другой путь без строк, хотя я действительно не знаю, быстрее ли это или нет. Вместо toDataURL (поскольку все вопросы здесь делают предложение). В моем случае хотят предотвратить dataUrl/base64, так как мне нужны буфер Массива или представление. Таким образом, другой метод в HTMLCanvasElement toBlob. (Функция TypeScript):
export function canvasToArrayBuffer(canvas: HTMLCanvasElement, mime: string): Promise<ArrayBuffer> {
return new Promise((resolve, reject) => canvas.toBlob(async (d) => {
if (d) {
const r = new FileReader();
r.addEventListener('loadend', e => {
const ab = r.result;
if (ab) {
resolve(ab as ArrayBuffer);
}
else {
reject(new Error('Expected FileReader result'));
}
}); r.addEventListener('error', e => {
reject(e)
});
r.readAsArrayBuffer(d);
}
else {
reject(new Error('Expected toBlob() to be defined'));
}
}, mime));
}
Другое преимущество блобов - Вы, может создать ObjectUrls для представления данных как файлов, подобных члену 'файлов' HTMLInputFile.Подробнее:
https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/toBlob
HTML5 предоставляет Canvas.toDataURL (mimetype ), который реализован в бета-версиях Opera, Firefox и Safari 4. Однако существует ряд ограничений безопасности (в основном, связанных с отрисовкой содержимого из другого источника на холст).
Так что вам не нужна дополнительная библиотека.
например