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

【问题标题】：How to get image bytes string (base64) in html5, jquery, javascript?如何在 html5、jquery、javascript 中获取图像字节字符串（base64）？
【发布时间】：2012-10-08 15:56:19
【问题描述】：

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

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

【问题讨论】：

使用jquery prop()保存图片源并使用$.ajax()发送
ok 图像保存在某个文件夹中，我可以读取但如何将它们转换为字节字符串

标签： jquery html

【解决方案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');

【讨论】：

我必须在 DOT NET Web 服务 API 上以 AJAX 格式发布此图像字节。这个怎么做？？我试过了，但它给出了同样的错误“输入不是有效的 Base-64 字符串，因为它包含非 base 64 字符”
您将不得不切断字符串的第一部分（这是一个数据 URL，而不仅仅是一个 base64 表示）。它看起来像data:image/jpg;base64,BASE64DATAHERE。如果你把所有东西都删掉到第一个逗号，你应该没问题
未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。
@CSQGB 请确保您遵循我的示例第一句中提到的先决条件

【解决方案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 之类的东西更干净、更快捷

【讨论】：

这是一个示例，说明如何在处理数据 URL 部分仍然打开的数据时修复错误“输入不是有效的 Base-64 字符串，因为它包含非 base 64 字符”前方。原始数据仍为压缩的 JPG 或 PNG 格式。