Saving and loading canvas data from localStorage

Question

I need to save all the drawings from my canvas in order to be able to return to them later.

I managed to get and put the data, but I can not save the object and return it correctly.

This is my code:

var imgData = a.getImageData(0, 0, 500, 200); localStorage.setItem("test",JSON.stringify(imgData)) console.log(imgData) console.log(JSON.parse(localStorage.getItem("test"))) b.putImageData(imgData, 0, 0); 

Answer 1

I want to save huge data as images in local storage, you have to convert from buffer to string and use these functions

  function buf2str(buf) { var bufView = new Uint16Array(buf); var unis ="" for (var i = 0; i < bufView.length; i++) { unis=unis+String.fromCharCode(bufView[i]); } return unis } 

for inverse function use this function

 function str2buf(str) { var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char var bufView = new Uint16Array(buf); for (var i=0, strLen=str.length; i<strLen; i++) { bufView[i] = str.charCodeAt(i); } return buf; } 

i is successful for saving data and editing after callback

my code

  var canvasData={ _save:function(from,id){ var imgData = from.getImageData(0, 0, el.width, el.height); var buffer = imgData.data.buffer; var testV=ab2str(buffer); try { localStorage.setItem(id+"Length",testV._length) localStorage.setItem(id+"Keys",testV._keys) localStorage.setItem(id+"Data",testV._Data) } catch(e) { var storageSize = Math.round(JSON.stringify(localStorage).length / 1024); console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K"); console.log(e); alert("your localStorage is complete , you must delete some nots or markers to be can store again ") } }, _return:function(to,id){ var tempObj={_Length:0,_Keys:"",_Data:""} try { tempObj._Length= localStorage.getItem(id+"Length") tempObj._Keys= localStorage.getItem(id+"Keys") tempObj._Data= localStorage.getItem(id+"Data") } catch(e) { var storageSize = Math.round(JSON.stringify(localStorage).length / 1024); console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K"); console.log(e); } if (tempObj ==null ){return false}; if (tempObj._Length ==null ){return false}; if (tempObj._Keys ==null ){return false}; if (tempObj._Data ==null ){return false}; var temp=tempObj._Length.split(","); var newWidth=parseInt(temp[0]); var newHeight= parseInt(temp[1]); var newImgData = to.createImageData(newWidth,newHeight); var incomingBuffer=returnOriginalBuffer(tempObj) newImgData.data.set(new Uint8Array(incomingBuffer)) to.putImageData(newImgData, 0, 0); } } function ab2str(buf) { var bufView = new Uint16Array(buf); var dataArr=new Array(); var dataStr ="" var keysStr ="" var lenStr=el.width.toString()+","+el.height.toString() var returnedObj={_length:lenStr,_keys:"",_Data:""} var dote=""; for (var q = 0; q < bufView.length; q++) { if(bufView[q]!=0){ keysStr=keysStr+dote+q; dote="," dataArr.push(bufView[q]); } } for (var w = 0; w < dataArr.length; w++) { dataStr=dataStr+String.fromCharCode(dataArr[w]); } returnedObj._keys=keysStr; returnedObj._Data=dataStr; return returnedObj } function returnOriginalBuffer(tempObj) { var temp=tempObj._Length.split(","); var _length=parseInt(temp[0])*parseInt(temp[1])*2 var _keys=tempObj._Keys; var _data=tempObj._Data; var keysArr =new Array(); var dataArr=new Array(); keysArr=_keys.split(",") for (var w=0, strLen=_data.length; w<strLen; w++) { dataArr[w]=_data.charCodeAt(w) ; } var buf = new ArrayBuffer(_length*2); // 2 bytes for each char var bufView = new Uint16Array(buf); var q=0 for (var i=0, strLen=_length; i<strLen; i++) { if (i!=parseInt(keysArr[q])){ bufView[i] = 0; }else{ bufView[i] = dataArr[q] q++; } } return buf; } //save data canvasData._save(ctx,"localstoragename") // return data canvasData._return(ctx,"localstoragename") 

this concession is complicated, if anyone has their own workaround, help us

Answer 2

You can use the canvas.toDataURL() method, which will encode the canvas in Base64.

You can then create an image with the source being the data URL, and then draw that image on the canvas.

Here is a working sample.

 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); var url = canvas.toDataURL(); localStorage.setItem('url', url); var canvas2 = document.getElementById('tutorial2'); var ctx2 = canvas2.getContext("2d"); var toDrawUrl = localStorage.getItem('url'); drawDataURIOnCanvas(toDrawUrl, ctx2); ctx2.fillStyle = "rgb(200,200,0)"; ctx2.fillRect (20, 20, 55, 50); function drawDataURIOnCanvas(strDataURI, context) { "use strict"; var img = new window.Image(); img.addEventListener("load", function () { context.drawImage(img, 0, 0); }); img.setAttribute("src", strDataURI); }