切入正题…我想采取一个本地图像文件，使用javascript从该图像创建一个dataurl值。我不太确定该怎么做。我看了一堆代码的例子，我不确定他们到底在做什么与画布的东西。我还能访问本地文件吗?我敢打赌，这将是一个安全风险，javascript将无法触及它的沙箱。
本质上，用真正的释义JS，这就是我想做的…
var imgTest = "/tmp/prev/localimage.jpeg";
var imgTest = imgTest.toDataUrl;
document.write(imgTest);
最终结果希望是打印到网页的dataurl字符串，"data:image/jpeg;base64，/9j/4aaqskzjrgabaqqe…"
这有意义吗?我只是想要数据url信息在一个变量中
非常感谢你的伟大的建议StackOverflow!
" toDataURL()方法要求绘制到画布上的任何图像都托管在与执行它的代码具有相同域的web服务器上。如果不满足此条件，则抛出SECURITY_ERR异常。源
对我来说，这听起来像是它不会与本地文件一起工作，并且用于从HTML5画布上绘制的内容生成编码图像数据。
查看Mozilla文档确认toDataURL()是专门针对画布对象的函数，而不是图像对象。
如果我理解正确的话，您可以在相同尺寸的画布上绘制图像，然后使用toDataURL()方法生成编码的数据。当然，这是假设图像文件与JavaScript代码位于同一位置。
MDN有一个非常整洁和简单的示例，可以准确地演示您想要的内容:
<!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>
您可以创建一个图像对象，将其绘制到画布上，然后在画布上调用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);
}
您可以为用户提供一个输入[type=file]，用户可以在其中选择要使用的图像。
之后你可以通过FileReader访问图像数据。
这是一个很好的教程:http://www.html5rocks.com/en/tutorials/file/dndfiles/FileReader API还提供了一个readAsDataURL方法，该方法可以为您提供Base64字符串。