jquery - 如何在 html5、jquery、javascript 中获取图像字节字符串(base64)？

Question

我在 iPhone 或 Android 中有一个图像，我想通过 jQuery AJAX 将该文件流或字节字符串传递到 Web 服务以将文件存储在服务器上。

那么，在 HTML5 中，我如何获取图像文件(jpg、gif 等)字节字符串以便将其发布到服务器？

Answer 1

您可以使用 canvas.drawImage(image, 0, 0) 将图像复制到相同大小的 Canvas ，然后使用 .toDataURL('image/TYPE') Canvas 的方法来检索图像的 base64 表示。 'TYPE' 将是 jpg、gif 或 png

示例:确保当前页面和图像都在相同的域、子域和协议(protocol)中，否则您将收到安全错误。还要确保 Canvas 与图像具有相同的宽度和高度

HTML

<img src="whatever.jpg" id="myimage" />
<canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas>

Javascript

var myImage = document.getElementById('myimage');
var myCanvas = document.getElementById('mycanvas');

var ctx = myCanvas.getContext('2d');

ctx.drawImage(myImage, 0, 0);

var mydataURL=myCanvas.toDataURL('image/jpg');