如何在JavaScript中获取图片数据网址？
若要使用javascript将图像从HTML页面标签转换为数据URI，首先需要创建一个canvas元素，将其宽度和高度设置为与图像相同，在其上绘制图像，最后在其上调用toDataURL方法。
这将返回图像的base64编码数据URI。例如，如果您有一个ID为my-image的图像，则可以使用以下命令-
示例
function getDataUrl(img) {
//创建画布
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
//设置宽度和高度
canvas.width = img.width;
canvas.height = img.height;
//绘制图像
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/jpeg');
}
//选择图像
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
const dataUrl = getDataUrl(event.currentTarget);
console.log(dataUrl);
});
输出结果
这将给出输出-
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB
-
问题内容： 我有一个带有一些图像的常规HTML页面（只是常规HTML标签）。我想获取他们的内容，最好以base64编码，而无需重新下载图像（即浏览器已经加载了该图像，所以现在我想要的内容）。 我很乐意使用Greasemonkey和Firefox实现这一目标。 问题答案： 注意： 仅当图像与页面来自同一域或具有属性并且服务器支持CORS时，此方法才有效。它也不会给您原始文件，而是一个重新编码的版本。
-
问题内容： 如何获取JavaScript中元素的URL ？例如，我有这个： 我如何 只 获取URL ？ 问题答案： 您可以尝试以下方法： 编辑： 根据@Miguel和下面的其他注释，如果您的浏览器（IE / FF / Chrome …）将其添加到url，则可以尝试删除其他引号： 如果可能包含单引号，请使用：
-
问题内容： 我正在使用CodeIgniter建立一个网站，我有各种资源可以像这样通过base_url]帮助器函数加载 产生（即www.mysite.com） 然后，我可以像这样在javascript中与另一个资源交换该资源 发生的事情是它将尝试加载资源而不使用php生成的绝对路径，因此我的解决方案是使用php在每个页面中添加一个虚拟标记，如下所示 然后，我将javascript行修改为 它确实可以
-
问题内容： 我从CSV文件加载了一些机器学习数据。前两列是观察值，其余两列是要素。 目前，我执行以下操作： 它给出了类似的东西： 我想两个dataframes切片此数据框：包含列一个和和包含一个列，和。 不可能写这样的东西 我不确定最好的方法是什么。我需要吗？ 顺便说一下，我发现数据帧索引非常不一致：允许，但不允许。另一方面，不允许，但允许。是否有实际原因？如果列是由Int索引的，这确实令人困惑，
-
我有一个DialogFragment，它使用FragmentPagerAdapter来显示选项卡。每个选项卡都有一个使用RecyclerView的不同片段。我可以获取单击后传递给片段的项目，但如何才能将数据从片段获取到DialogFragment，以便将其传递给调用活动？ TabDialog扩展DialogFraank： TabAdapter扩展了FragmentPagerAdapter 在Fra
-
问题内容： 问题很简单。如何在jQuery中获取div的背景图像大小（宽度和高度）。可能吗 我认为这可以工作： 我收到的错误消息是这不是一个函数。 问题答案： 您将必须执行以下操作： 由于代码的简单性，您不能在背景图片的URL中使用括号或引号。但是，可以扩展代码以获得更多支持。我只是想传达一般想法。