1

I want to store image locally and use it to anywhere in tizen application.

I tried by using canvas but canvas data uri not showing exact image which have in URL.

The snippet of code who I am using.

var img = new Image();
img.src = imageURL;

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.setItem('image', data);
kevinSpaceyIsKeyserSöze
  • 3,693
  • 2
  • 16
  • 25
Manjeet
  • 191
  • 1
  • 14

1 Answers1

1

Your code does not work because you want save an array to localStorage. Instead of context.getImageData() you have to use canvas.toDataURL() and then convert dataURL to Base64 string image. After this you can save it to the localStorage.

Your image must be online and in the same domain like your script. It is because of Cross-origin resource sharing (CORS). But if you convert your image like me in dataURL before and then you should not have any problem.

And to localStorage you have today (in 2018) an access only in online mode. Please read:

Full example

See this working example on codepen.io (link to example) because on StackOverflow the snippets are sandboxed and because of this we can not have an access to the localStorage.

var canvas = document.createElement('canvas');
var image = new Image();
var ctx = canvas.getContext('2d');

image.onload = function()
{
    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image, 0, 0);

    var dataURL = canvas.toDataURL('image/png');

    var Base64StringImage = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

    localStorage.setItem('image', Base64StringImage);

    //read from localStorage:
    document.querySelector('img').src = 'data:image/png;base64,' + localStorage.getItem('image');
};

image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADnElEQVRYhaWXz2/cRBTHP/Y4zka0ShPQJluJLkl/0EsSl24OCAgRFQoH1Ir/oNmeEJdScYUDXOitSBxASFmQ4MSJay6EtojLgvIDCUKhaQIipCI/SlKy690Zc2jWa3ttT4Tn9p3v6H3fe/Pm2c/wPM/jYC25n1Nnl5L9emuLDbnIgBj18ba6S5857ONPHz5P3MqbIzh2meNi3N+Ls28Fye8bH/lE69C8O8NUzw1/f8GtMJl7L1Y0STjNvhUkz1iXsI0j/Nj4wj+0rqqhLPwpqx1ZSRPW2beC5LP2WxiGAeAfistCEKcJR8Xj7Ft1dgGwjSM+2c1RAFxvD6AjC0G8o+4xV3unQzgvRnC6yujsW627aHnUzdGQx780v0rNgnsg4AtHMvKEOJtq32rdRfBQNF3BqJNw2lWk2beih1xvr0M8GHUU62pAZ9/4q7ngpb3zb+vvs6XusKmWQwaPGUMURIkm+6n8T80vYx0qmOdx7DJmNKoFtxLCf6ufeTX3CRe6r/O4+TTHjCEmu9/lUs9n7KgVLR9dg+Y5Xsl9yFTPBwyIMSzdO99Wv7Imb1O0JthWK7js8pT1EhtykXVVBdDyAAPmGI59hYJ4JuSQBenvHGC+McMDtcoPjY/9vU25fCg+b44e1Egp9iosSH/nAMprhJ6b6+0hqfs4jd9RK8zV3u4QLojzOPZ0+xWkZWHMvsyw9TJg+FW8rqrM1t7U8tE+MWiew7GvMCicdgaCUUdxr1FkSFxgQy6yKZeR1FlXVY6LcfLmCHXvn1T+vloCkmvAqOw953+OC2aJTbXse10wS/SaT/JA/R4qKHjUePJilKb3byp/Xy6l18Dlx27HEtvqLgtuBUmjI41wcM+eq+VzRi+ztav+/gnxAmvyVtuBJOF7cg7w6DNPcTE3wx/yO+YbM0jPxbGnKYpJZmvXqLGTyo/bb4QEna5yvANR4fZ+tj7QL06Hoo5iK0k4uLL0gbiog9jqM4djf7Hajn2dqQ/ERR3E2hqAbH1AlwVtDWTtA9EsRLGxJX/z0mrgrPVapj4Q/AXfknfoF6dD2NDNBUmrlTGFZE3e9PdPiIkQDvaZ/zUXJAm3MnYxVwkJOl3TIayzr50LkoRb69FdtqOOYp197Vxw0prS9gnHLrO2f8vngzjzXKDrEwD95imKYoJV+U0HzjwXJAlHMzJml1ndv9mBdfYPPRfoWna/eZKieDEWZ5oLDvOtaC3Hnk7ESfb/A1K3qRpcj5DtAAAAAElFTkSuQmCC';

<img src="#">
Bharata
  • 13,509
  • 6
  • 36
  • 50
  • I have used this canvas.toDataURL("image/png") but it is not displaying exact image who has in URL. – Manjeet Aug 28 '18 at 13:31
  • I am asking about stored image in local storage from image URL but your example not with image URL. – Manjeet Aug 29 '18 at 13:26
  • @ManjeetKumar, I wrotte you already in my answer: **your image must be online and in the same domain like your script**. But you did not tried it! Why? If you want an image URL. then instead of `image.src = 'data:image/png...` write `image.src = yourImageURL`. But it must be on your server. Read my answer again please. – Bharata Aug 29 '18 at 13:39
  • @ManjeetKumar, or you could convert all your images into dataURL images like in my example. Use **[this online convert service](https://dopiaza.org/tools/datauri/index.php)** for this. – Bharata Aug 29 '18 at 13:46
  • Image is store in other server. I have image URL and I am trying to store image in local. Is it possible to store other sever image in local ? – Manjeet Aug 30 '18 at 06:12
  • @ManjeetKumar, yes it is possible to store other sever image in local, but you have to convert all your images into dataURL images like in my example. Use **[this online convert service](https://dopiaza.org/tools/datauri/index.php)** for this. How many images do you have? (**this is question**) Or you could give all the links and I convert your images into dataURL images. – Bharata Aug 30 '18 at 07:03