以为我有这个，但没有。目标是：拍摄照片（保险卡），将其保存在本地，然后再取回。
// Get a reference to the image element
var elephant = document.getElementById("SnapIt_mobileimage_5");
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;
// Draw image into canvas element
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height );
console.log( 'Did that' );
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("data:image/jpg;base64,");
// Save image into localStorage
try {
localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
console.log("Storage failed: " + e);
};
//Did it work?
var pic = localStorage.getItem("elephant");
console.log( elephant );
console.log( pic );
每一步成功，最终输出为：
<img id="SnapIt_mobileimage_5" class=" SnapIt_mobileimage_5" name="mobileimage_5" dsid="mobileimage_5" src="files/views/assets/image/IMG_0590.JPG">
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
在新页面上，当我问
var policy_shot = localStorage.getItem( 'elephant' );
console.log( policy_shot );
$('#TestScreen_mobileimage_1').src = policy_shot ;
它记录二进制文件：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ....
但是图像没有出现。
1）这是在本地将图像转换成字符串的唯一方法（不包括FileReader加载的文件，请参见下文）。（可选）您需要使用服务器来执行此操作。
2）要获取JPEG图像，您需要使用如下参数：
var datauri = imgCanvas.toDataURL("image/jpeg", 0.5); //0.5 = optional quality
不要data:...在参数中使用，因为那将是无效的，并且会产生默认的PNG，如您在结果中看到的那样。toDataURL()只能采用一种类型，即。image/png，image/jpeg等等。
3）
如果您的图像是从其他来源（方案，服务器...）加载的，或者是通过使用本地引用的文件（file://，/my/path/等等）加载的，则CORS会启动，并会阻止您创建data-uri，即：图像为空（因此不可见）。
对于外部服务器，您可以通过提供crossOrigin属性来请求跨域使用图像的权限：
<img src="http://extrernalserver/...." crossOrigin="anonymous" />
或img.crossOrigin = 'anonymous';在设置src。
但是，由服务器决定是允许还是拒绝该请求。
如果仍然无法正常工作，则需要通过代理服务器加载图像（例如，服务器上的一个页面，该页面可以从外部加载图像并从您自己的服务器提供图像）。
或者，如果您有权访问服务器的配置，则可以添加特殊的访问允许标头（Access-Control-Allow-Origin: *，有关更多详细信息，请参见下面的链接）。
CORS（跨域资源共享）是一种安全机制，只能通过其他方式解决。
对于本地文件，你需要使用FileReader-这可以变成是一个优势，因为FileReader带有一个方便的方法：readAsDataURL()。这使您可以直接将数据文件“上传”为数据uri，而无需通过画布。
在此处查看示例：https :
//developer.mozilla.org/en-US/docs/Web/API/FileReader
不幸的是，您不能仅从代码中选择文件-您将需要提供输入元素或放置区，以便用户可以选择他要存储的文件。
如果所有这些步骤都达到了您确实获得图像的程度，则问题可能出在另一端，被截断的字符串太长而无法存储。
您可以通过检查存储字符串前后的长度来验证是否已被剪切：
console.log(imgAsDataURL.length);
... set / get ...
console.log(pic.length);
其他可能性：
（我认为我涵盖了大多数典型的陷阱？）
更新（缺少一个，有点.. ;-p）
OP在框架中找到了一个特定的对象，我将在此包括它以供将来参考：
最后，问题出在
$('#TestScreen_mobileimage_1').src = policy_shot ;我正在使用Appery.io而他们不支持.src。它的
$('#TestScreen_mobileimage_1').attr("src", policy_shot ) ;
最后一点：localStorage在存储图像方面非常有限。典型的存储空间为2.5-5 mb。每个存储的char占用2个字节，并且存储一个编码为base-64的data-uri比原始字符大33％-因此空间将很短缺。查看索引数据库，Web SQL或文件API可以找到更好的选择。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句