如何使用 javascript 将图像 url 转换为 dataurl（base64 数据）答案

【问题标题】：how to convert image url to dataurl (base64 data) with javascript如何使用 javascript 将图像 url 转换为 dataurl（base64 数据）
【发布时间】：2013-09-24 12:36:55
【问题描述】：

如何在不使用 html5 画布对象的情况下将图像 url 转换为 base64 编码的数据 url。

canvas.todataURL()

我正在使用 canvas.todataURL 获取 base64 数据，但它无法读取远程 url，所以我想在不使用 canvas.todataURL() 的情况下将我的图像 url 转换为 dataurl 并在我的应用程序中使用它。
我该怎么做。

【问题讨论】：

如果您使用Cross-origin resource sharing，您实际上可以将canvas.toDataUrl() 与远程图像一起使用。浏览器支持仍然很差。
@Strille：更新——好消息！实际上，大多数现代浏览器确实支持跨浏览器 XMLHttpRequests Good on: ie10,FF,webkit,ios,blackberry, Awkward implementation on: ie9, no support on : 迷你歌剧。当然 ie

标签： javascript jquery html canvas html5-canvas

【解决方案1】：

如果不使用 canvas.toDataUrl()，您无法仅在 javascript 中执行此操作。您将不得不在服务器端做一些事情。基本上创建一个简单的服务，它将图像的 url 作为参数，然后将该图像作为 base64 字符串返回。

【讨论】：

hmm... 是的，我确实创建了一些服务来发送图像 url 并返回 base64 字符串，但是在我的应用程序中没有机会使用任何服务器端脚本，它纯粹是在 html 和 javascript 上。这就是为什么我试图在纯 javascript 上做到这一点..

【解决方案2】：

您可以使用此代码-

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>

在这里找到它- How to get base64 encoded data from html image

【讨论】：