将上传的图像保存到localStorage（chrome扩展名）
我很难找到我将如何将上传的图像存储在localStorage中，这是由用户在我的选项页面中输入的。 关于如何做的文档太多，因为有一段时间它是一个已知的错误 ，我无法在Stack上找到任何示例。 有一些示例关于如何在页面上保存图像但在输入图像上没有任何内容。
我所拥有的只是HTML，但我想在后面运行的javascript需要访问输入值或其他东西（？）。
然后在用户选择文件后，输入的值为C:\fakepath\some_image.jpg 。 我不想存储文件路径，但如果可能的话，存储实际的图像。
$("#uploadImage").change(function(){ alert($("#uploadImage").val()); });
编辑：
我从这个堆栈主题找到了一个如何做的示例，但是我从$("#uploadImage").val()得到的文件路径不起作用（所以我不知道这个方法是否有效，即使文件路径有效）
var img = new Image(); img.src = $("#uploadImage").val(); img.load = function() { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var data = context.getImageData(x, y, img.width, img.height).data; localStorage['uploadedImage'] = data; // save image data };
这需要FileReader API，并且只是此答案的修改版本（参考： 将图像加载到 from ）：
var input = document.getElementById('uploadImage'); input.onchange = function(evt){ var tgt = evt.target || window.event.srcElement, files = tgt.files; if (FileReader && files && files.length) { var fr = new FileReader(); fr.onload = function () { localStorage['foo'] = fr.result; } fr.readAsDataURL(files[0]); } }
然后，您可以通过执行以下操作将其应用为背景图像：
var el = document.querySelector('body'); el.style.backgroundImage = 'url(' + localStorage['foo'] + ')';
您无法从http://或https:// URL打开file:// URL，因为这会破坏安全性（请参阅此问题 ），但是，如果您只是从file://运行HTML页面file:// URL应该使用您的代码。
您确实需要确保canvas元素与图像的尺寸相同，并且最好在onload回调函数之后指定src属性，以防它加载太快而无法使onload回调绑定到位。
您还应确保使用正确的localStorage API来存储和检索localStorage中的项目。
canvas.toDataURL()也是获取图像数据的Base64字符串的一种更简洁的方法。
这是一些更新的代码。
var img = new Image(); img.onload = function() { var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var data = canvas.toDataURL(); localStorage.setItem('uploadedImage', data); // save image data }; img.src = 'file://' + $("#uploadImage").val();
然后，要获取该项目并将其用作页面上的图像，您可以使用：
var $img = $('![]()
', { src: localStorage.getItem('uploadedImage') }); $('body').append($img);
那么，你可以这样做：
- 首先使用FileAPI读取文件。 这里可以找到一个很好的例子
- 获得文件内容后，您还有另一个问题：如何存储它。 LocalStorage只接受字符串，因此您需要将二进制图像文件转换为Base64，例如它们就像在这里一样
- 最后，您可以稍后使用data-URI渲染图像
正如您所看到的，这并不容易，但如果按照说明操作，您仍然可以这样做。