HTML как получить файл ресурсов canvas?

#javascript #html #canvas #resources #imagesource

Вопрос:

Изображение на HTML-странице представлено в виде холста, но у меня возникли проблемы с получением имени исходного изображения этого холста с помощью javascript.

Страница: https://www.futbin.com/22/squad-builder

Я нашел это изображение на странице ресурсы:

Но как получить это программно? Я имею в виду, если у меня есть:

 var canvas = document.getElementById('field-area')

Как получить имя файла? Результатом должно быть «field_1920x1080.png?v=8»

1. У вас уже есть имя файла, оно «filed_1920…» Или вы хотите получить его программно? Почему? И какие сценарии вы можете запускать (поскольку это явно не для вашего собственного сайта)

Ответ №1:

Вы можете использовать HTMLCanvasElement.toDataURL, чтобы получить изображение, нарисованное на холсте base64 encoded

 var canvas = document.getElementById('field-area');
var b64url = canvas.toDataURL('image/png');

Это вернет URL-адрес для самого изображения, я не думаю, что вы можете получить имя ресурса непосредственно из canvas элемента, не проверив код на веб-сайте

1. Эй, спасибо за ответ) Но я надеюсь, что еще есть такая возможность получить имя ресурса файла.

2. я не думаю, что ты сможешь достать их, насколько я помню, но да, удачи

Ответ №2:

EJBEAN прав, элемент canvas не знает, какие ресурсы использовались для рисования.

Почему бы вам не dataset следить за тем, что вы использовали?

 var canvas = document.getElementById('field-area');
// ... draw resource here
canvas.dataset.resource = "field_1920x1080.png";

Это простой способ сохранить данные для любого элемента на вашей странице.