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

Question

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

那么，在 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');

Answer 2

要添加到代码示例以隔离字符串开头没有格式的原始数据...

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/png');// could also be 'image/jpg' format

/* to remove the 'data:image/jpg;base64,' later from using the toDataURL() function (or PNG version data:image/png;base64,') and have only the raw base4 data string, split the result string from the ctx.drawImage() function at the comma and take the second half, and the remaining data will be in tact like so: */

var myBase64Data = myDataURL.split(',')[1];// removes everything up to and including first comma

我个人喜欢这个，发现它比使用 indexOf 和 substring 更干净、更快