寻找 toDataUrl 指导答案

【问题标题】：Looking for toDataUrl guidance寻找 toDataUrl 指导
【发布时间】：2012-12-25 07:36:02
【问题描述】：

切入正题...我想获取一个本地图像文件，使用 javascript 从该图像创建一个 dataurl 值。我不完全确定如何去做。我看过一堆代码示例，但我不确定他们到底在用画布做些什么。我什至可以希望为此访问本地文件吗？我敢打赌，这将是一个安全风险，并且 javascript 将无法通过它的沙箱。

基本上，使用 REAL 解释的 JS，这就是我想要做的......

var imgTest = "/tmp/prev/localimage.jpeg";
var imgTest = imgTest.toDataUrl;
document.write(imgTest);

希望最终结果是打印到网页的 dataurl 字符串，“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQE...”

这有意义吗？我只想要一个变量中的 dataurl 信息。

非常感谢您对 StackOverflow 的宝贵建议！

【问题讨论】：

您是否尝试在不调用服务器的情况下执行此操作，即将图像转换为数据：图像格式？另外，你问的是本地文件的访问还是base64的转换？
是的，这将是一个仅限本地的环境。一切都在客户端完成。我想完成本地文件到base64的转换。但是，我怀疑我是否能够使用 JavaScript 访问本地文件。我在想也许我可以以某种方式从 DOM 中提取图像并将其转换为 base64？我认为这需要与画布元素进行一些交互，但我不太确定该过程是如何工作的......谢谢@Dancrumb！

标签： javascript image data-url

【解决方案1】：

“toDataURL() 方法要求绘制到画布上的任何图像都托管在与执行它的代码具有相同域的 Web 服务器上。如果不满足此条件，则会引发 SECURITY_ERR 异常。” Source

对我来说，这听起来不适用于本地文件，而是用于从 HTML5 画布上绘制的内容生成编码图像数据。

查看Mozilla documentation 可以确认toDataURL() 是专门针对画布对象的函数，而不是图像对象。

如果我理解正确，您可以在相同尺寸的画布上绘制图像，然后使用 toDataURL() 方法生成编码数据。当然，这是假设图像文件与 JavaScript 代码位于同一位置。

【讨论】：

我选择这个作为答案是因为我一遍又一遍地用头撞墙，我根本无法使用 JS 访问本地资源以满足我的需要。我经过惨痛的教训才学到这个！你的回答最符合我的情况。我的工作最终是使用python在隐藏跨度的html文档中内联生成base64数据，完全避免使用JS来创建base64数据！感谢大家提供的所有有用的答案！我还学习了文件读取，这将在未来的项目中派上用场！

【解决方案2】：

MDN 有一个pretty neat and simple example，可以准确地展示您想要的内容：

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

Try it out.

【讨论】：

【解决方案3】：

您可以创建一个图像对象，将其绘制到画布上，然后在画布上调用 toDataURL()。像这样：

function draw() {
  var dataURL;
  var that = this;
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
    context.drawImage(img,0,0);
    dataURL = canvas.toDataURL();
    // can call some other function once the image is loaded and you have the dataURL, e.g.
    that.onDataURL(dataURL);
  };
  img.src = '/files/4531/backdrop.png';
}

function onDataURL(dataURL) {
  console.log(dataURL);
}

【讨论】：

【解决方案4】：

您可以向用户提供输入[type=file]，他可以在其中选择要使用的图像。

之后，您可以通过 FileReader 访问图像数据。

这是一个很好的教程：http://www.html5rocks.com/en/tutorials/file/dndfiles/

FileReader API 还提供了一个 readAsDataURL 方法，可以为您获取 Base64 字符串。

【讨论】：