HTML如何获取画布资源文件？答案

【问题标题】：HTML how to get canvas resource file?HTML如何获取画布资源文件？
【发布时间】：2021-11-29 05:20:56
【问题描述】：

HTML 页面上的图片表示为画布，但我无法使用 javascript 获取此画布的源图像名称。

我在页面资源中找到了这张图片：

但是如何以编程方式获取它？我的意思是，如果我有：

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

如何获取文件名？结果应该是“field_1920x1080.png?v=8”

【问题讨论】：

【解决方案1】：

EJBEAN 是对的，canvas 元素不知道用什么资源来绘制。

您为什么不使用dataset 来关注您使用的内容？

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

这是一种保存页面上任何元素的数据的简单方法。

【讨论】：

【解决方案2】：

您可以使用HTMLCanvasElement.toDataURL 获取在画布上绘制的图像base64 encoded

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

这将返回图像本身的 url，我不认为你可以直接从 canvas 元素获取资产名称而不检查网站上的代码

【讨论】：