HTML5相机图像到本地存储

Question

我的移动应用程序首先使用html5的camera元素，然后拍照。 然后图片显示在单独的div上。 我在命名图像时遇到问题，然后将图像和标题都保存到本地存储。 我的尝试是徒劳的，还是有办法做到？

感谢您提供的任何帮助或指导。

Answer 1

要将图像保存在本地存储中，您需要将其转换为dataURL字符串。 您可以通过canvas元素执行此操作，如下所示。

当您想从本地存储中检索图像并显示它时，只需将图像元素的src属性设置为dataURL字符串即可。

 // convert image to localstorage friendly data URL string function getImageDataURL(img) { var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); return dataURL; } var image = new Image(); image.onload = function() { var dataURL = getImageDataURL(image); document.body.innerHTML = dataURL; image.src = dataURL; document.body.appendChild(image); }; image.crossOrigin = 'anonymous'; image.src = '//placekitten.com/g/120/120';