Javascript 从localStorage保存和加载画布数据

我需要保存画布上的所有图形，以便以后能够返回到它们

我成功地获取和放置数据，但无法保存对象并正确返回

这是我的代码：

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);

---

您可以使用

canvas.toDataURL（）

方法将画布编码为Base64

然后，您可以创建一个源为数据url的图像，然后将该图像绘制到画布上

---

我想将大量数据保存为本地存储器中的imagedate，您必须将其从缓冲区转换为字符串并使用此函数

    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
   }

功能buf2str（buf）{
var bufView=新UINT16阵列（buf）；
var unis=“”
对于（变量i=0；i

要反转函数，请使用此函数

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;
}

函数str2buf（str）{
var buf=new ArrayBuffer（str.length*2）；//每个字符2个字节
var bufView=新UINT16阵列（buf）；
对于（var i=0，strLen=str.length；我已经尝试过了，但我想在新画布中编辑形状，并在需要时再次保存形状如果我使用“toDataURL”，我无法删除或编辑形状中的零件并保存它again@Elbazz我假设你只需要图像数据。在画布上绘制图像后获取图像数据。或者这可能会给你一个idea关于序列化图像数据非常感谢您，我成功地将其保存到本地存储中，但通过抓住完整点，您的链接帮助我，我在其中对此发表了评论
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;
}

 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")