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

Question

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

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

Answer 1

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

示例:确保当前页面和图像都在同一个域,子域和协议上,否则您将收到安全性错误.还要确保画布具有与图像相同的宽度和高度

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');