将图像保存到localstorage - canvas

我正在使用html5存储来存储我的图像。它在铬中效果很好。在FireFox中它可以工作8/10次。将图像保存到localstorage - canvas

function getBase64Image(img) { 
     var canvas = document.createElement("canvas"); 
     canvas.width = img.width; 
     canvas.height = img.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0); 

     console.log("line 1 : " + img.src); 
     var dataURL = canvas.toDataURL('image/jpeg'); 
     console.log("line 2 : " + dataURL.replace(/^data:image\/(jpeg);base64,/, "")); 
     return dataURL.replace(/^data:image\/(jpeg);base64,/, ""); 
    }

有时它只返回“数据”。

我看到画布尺寸为0x0：

canvas.width = img.width; 
canvas.height = img.height;

这是为什么发生？

来源

2015-06-22 igor

'如果画布的高度或宽度为0，则返回字符串“data :,”，这可能是问题吗？ – Rouby

不，我正在加载一个好的图像，我也看到第一行是好的，问题出在替换 – igor

你能提供一个plnkr或类似的重现吗？ – Rouby

如果画布的高度或宽度为0，则返回字符串“data：”。

这很可能是一些图像无法接收到正确的dataUrl的原因。

检查您的img元素和/或脚本以获取并设置画布的宽度和高度。

自动宽度和高度仅在图像加载后才可用。

来源

2015-06-22 10:08:34 Rouby

该函数试图获取图像加载前的高度/宽度，所以我得到0x0。要解决此问题，请在调用保存功能之前添加img.onload。

function readURL(input, image, width, height) { 
      if (input.files && input.files[0]) { 

       var reader = new FileReader(); 

       reader.onload = function (e) { 
        //Save the image 
        var img = new Image(); 
        img.src = e.target.result; 
        img.onload = function (e){ 
         if (image.id == 'photo1') { 
          save(img, 'image1'); 
         } 
         else { 
          save(img, 'image2'); 
         } 
        } 
       } 
       reader.readAsDataURL(input.files[0]); 
      } 
     }

来源

2015-06-22 10:11:33 igor

将图像保存到localstorage - canvas

回答

相关问题