HTML how to get canvas resource file?-CodePudding

The picture on the HTML page is represented as a canvas, but I have problems getting the source image name of this canvas, using javascript.

Page:

But how to get it programmically? I mean, if i have:

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

How to get the file name? Result should be "field_1920x1080.png?v=8"

CodePudding user response：

You can use HTMLCanvasElement.toDataURL to get the image drawn on the canvas base64 encoded

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

This will return the url for the image itself, i don't think you can get the Asset name directly from a canvas element without inspecting the code on the website

CodePudding user response：

EJBEAN is right, the canvas element doesn't know what resources were used to draw.

Why don't you use dataset to keep an eye on what you used?

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

It's an easy way to keep data stored for any element on your page.