javascript - HTML5相机图像到本地存储

Question

我的移动应用程序首先使用html5的相机元素，然后拍照。然后图片会显示在单独的 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';