Jquery 是否可以通过索引从dropzone画布在本地存储中保存多个图像或文件？

我可以从一个画布拖动多个图像并将其放到另一个画布上，但我无法在Localstorage中存储图像。所以，我想根据图像索引将dropzone区域中的图像存储在localStorage中。如何克服这个问题？

我想要，

-将图像保存到LocalSrorage
-将文件保存到本地存储中
-通过IndexDB保存图像和文件

请任何人帮帮我。 谢谢你提前通知

身体{
背景颜色：象牙色；
填充：10px；
}
帆布{
边框：1px纯红；
}
#帆布{
}
#画布：活动{
光标：移动；
}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var drop=document.getElementById（“dropzone”）；
var dropCtx=drop.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var mouseIsDown=false；
var frameWidth=128；
var frameHeight=128；
//选中所选项目的复选标记
var checkmark=document.createElement（“img”）；
checkmark.src=”https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_960_720.png";
var图像=[]；
var项目=[]；
项目。推送（{描述：“房子#1”，url:）http://images.all-free-download.com/images/graphiclarge/green_house_icon_312519.jpg“，isSelected:false，isDropped:false，x:0，y:0}）；
项目。推送（{描述：“房子#2”，url:）http://freedesignfile.com/upload/2013/07/House-2.jpg“，isSelected:false，isDropped:false，x:0，y:0}）；
项目。推送（{描述：“House#3”，url:）https://thumbs.dreamstime.com/z/flat-house-icon-vector-69856508.jpg“，isSelected:false，isDropped:false，x:0，y:0}）；
var imgLoadCount=0；
对于（变量i=0；i=items.length）{draw（）；}
}
图片[i].src=items[i].url；
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
dropCtx.clearRect（0，0，drop.width，drop.height）；
var canvasX=0；
var-dropX=0；
//
对于（变量i=0；i=img.高度）{
context.drawImage（img，0，0，img.width，img.height，
x、 y、128、128*img.高度/img.宽度）；
}否则{
context.drawImage（img，0，0，img.width，img.height，
x、 y，128*img.width/img.height，128）；//编辑的s/b[，128]，不是[/128]
}
//外部框架（如果选中，则为绿色）
context.beginPath（）；
rect（x-2，y-2，frameWidth+4，frameHeight+30+4）；
context.lineWidth=3；
context.strokeStyle=“lightgray”；
如果（项[索引].isSelected）{
context.strokeStyle=“绿色”；
drawImage（选中标记，x+frameWidth-30，y+frameHeight+3）；
}
stroke（）；
}
功能手柄向下（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
//把你的鼠标下的东西放在这里
mouseIsDown=true；
}
功能handleMouseUp（e）{
mouseIsDown=false；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
//把你的鼠标放在这里
对于（变量i=0；i=item.x&&mouseX=0；i--）{
如果（项目[i].isSelected）{
项目[i]。isDropped=true；
项目[i].isSelected=false；
控制台日志（i）；
}
}
draw（）；
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#画布”）.mouseo