Javascript 将画布保存到JSON并将JSON加载到画布

我希望这样，当我按下保存按钮时，文件资源管理器会打开，并选择保存画布JSON文件的位置。我还希望能够通过load按钮加载带有JSON文件的画布。我怎样才能开始呢？感谢您的帮助

我希望这就是你想要实现的目标：

var canvas=document.querySelector（'canvas'）
var ctx=canvas.getContext（'2d'）；
var reader=new FileReader（）；
//生成随机RGB颜色字符串
var randomColor=函数（）{
返回`rgb（${Math.random（）*255}，${Math.random（）*255}，${Math.random（）*255}）`；
}
//在画布上画些东西
ctx.fillStyle=randomColor（）；
ctx.fillRect（Math.random（）*100100100，Math.random（）*150）；
ctx.fillStyle=randomColor（）；
ctx.fillRect（Math.random（）*200，Math.random（）*50，Math.random（）*150200）；
//保存按钮的事件处理程序
document.getElementById（'save'）。addEventListener（'click'，函数（）{
//检索画布数据
var canvasContents=canvas.toDataURL（）；//当前画布图像的数据URL
var data={image:canvasContents，date:date.now（）}；
var string=JSON.stringify（数据）；
//创建一个blob对象，将数据表示为JSON字符串
var file=new Blob（[string]{
键入：“application/json”
});
//触发标记上的单击事件以打开文件资源管理器
var a=document.createElement（'a'）；
a、 href=URL.createObjectURL（文件）；
a、 下载='data.json'；
文件.正文.附件（a）；
a、 单击（）；
文件.body.removeChild（a）；
});
//加载按钮的事件处理程序
document.getElementById（'load'）.addEventListener（'change'，function（）{
如果（此.files[0]）{
//读取中第一个文件的内容
reader.readAsText（this.files[0]）；
}
});
//此函数在获取文件内容后执行
reader.onload=函数（）{
var data=JSON.parse（reader.result）；
var image=新图像（）；
image.onload=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
drawImage（image，0，0）；//将新图像绘制到屏幕上
}
image.src=data.image；//data.image包含数据URL
};

拯救
加载：
我希望这就是您试图实现的目标：


var canvas=document.querySelector（'canvas'）
var ctx=canvas.getContext（'2d'）；
var reader=new FileReader（）；
//生成随机RGB颜色字符串
var randomColor=函数（）{
返回`rgb（${Math.random（）*255}，${Math.random（）*255}，${Math.random（）*255}）`；
}
//在画布上画些东西
ctx.fillStyle=randomColor（）；
ctx.fillRect（Math.random（）*100100100，Math.random（）*150）；
ctx.fillStyle=randomColor（）；
ctx.fillRect（Math.random（）*200，Math.random（）*50，Math.random（）*150200）；
//保存按钮的事件处理程序
document.getElementById（'save'）。addEventListener（'click'，函数（）{
//检索画布数据
var canvasContents=canvas.toDataURL（）；//当前画布图像的数据URL
var data={image:canvasContents，date:date.now（）}；
var string=JSON.stringify（数据）；
//创建一个blob对象，将数据表示为JSON字符串
var file=new Blob（[string]{
键入：“application/json”
});
//触发标记上的单击事件以打开文件资源管理器
var a=document.createElement（'a'）；
a、 href=URL.createObjectURL（文件）；
a、 下载='data.json'；
文件.正文.附件（a）；
a、 单击（）；
文件.body.removeChild（a）；
});
//加载按钮的事件处理程序
document.getElementById（'load'）.addEventListener（'change'，function（）{
如果（此.files[0]）{
//读取中第一个文件的内容
reader.readAsText（this.files[0]）；
}
});
//此函数在获取文件内容后执行
reader.onload=函数（）{
var data=JSON.parse（reader.result）；
var image=新图像（）；
image.onload=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
drawImage（image，0，0）；//将新图像绘制到屏幕上
}
image.src=data.image；//data.image包含数据URL
};

拯救
Load:
这是JSFIDLE：我不知道如何让javascript在这方面发挥作用，但从布局上看，它必须是JSON吗？为什么不将其存储为图像？因为，他希望保存画布的状态以供以后使用。图像不能完成这一点。我用它来练习json对象的操作。我只是不知道该怎么做这就是JSFIDLE：我不知道如何让javascript在这方面工作，但从布局上看，它一定是JSON吗？为什么不将其存储为图像？因为，他希望保存画布的状态以供以后使用。图像不能完成这一点。我用它来练习json对象的操作。我只是不知道该怎么办