如何使用 JavaScript 将图像 URL 转换为 DataURL(base64 数据）

how to convert image url to dataurl (base64 data) with javascript

本文关键字：DataURL base64 数据 转换 JavaScript 何使用 图像 URL      更新时间：2023-09-26

如何在不使用 HTML5 canvas 对象的情况下将图像 URL 转换为 base64 编码的数据 URL。

canvas.todataURL()
我正在使用canvas.todataURL

获取base64数据，但它无法读取远程url，因此我想使用canvas.todataURL（）将我的图像url转换为dataurl，并在我的应用程序中使用它。

我可以这样做。

您可以使用此代码-

.HTML-

    <img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
    <canvas id="myCanvas" />

JavaScript-

    <script>
     var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");
     var img = document.getElementById("preview");
     ctx.drawImage(img, 10, 10);
     alert(c.toDataURL());
    </script>

在这里找到了——如何从 html 图像中获取 base64 编码数据

如果不使用 canvas.toDataUrl（），你就不能纯粹在 javascript 中做到这一点。您必须在服务器端执行某些操作。基本上创建一个简单的服务，该服务将图像的 url 作为参数，然后将该图像作为 base64 字符串返回。

相关文章：