我能够从一个画布拖动多个图像并将其拖放到另一个画布上。但是我无法在Localstorage中存储图像。所以，我想根据图像索引从dropzone区域将图像存储在localStorage中。我怎样才能克服这个问题？
我想，
- 将图像保存到LocalSrorage中
- 将文件保存到LocalStorage中
- 通过IndexDB保存图像和文件
请有人帮助我。 谢谢你的进步。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background-color: ivory;
padding: 10px;
}
canvas {
border: 1px solid red;
}
#canvas {
}
#canvas:active {
cursor: move;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var drop = document.getElementById("dropzone");
var dropCtx = drop.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var mouseIsDown = false;
var frameWidth = 128;
var frameHeight = 128;
// checkmark for selected
var checkmark = document.createElement("img");
checkmark.src = "https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_960_720.png";
var images = [];
var items = [];
items.push({ description: "House#1", url: "http://images.all-free-download.com/images/graphiclarge/green_house_icon_312519.jpg", isSelected: false, isDropped: false, x: 0, y: 0 });
items.push({ description: "House#2", url: "http://freedesignfile.com/upload/2013/07/House-2.jpg", isSelected: false, isDropped: false, x: 0, y: 0 });
items.push({ description: "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;
for (var i = 0; i < items.length; i++) {
images[i] = document.createElement("img");
images[i].onload = function () {
if (++imgLoadCount >= items.length) { draw(); }
}
images[i].src = items[i].url;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
dropCtx.clearRect(0, 0, drop.width, drop.height);
var canvasX = 0;
var dropX = 0;
//
for (var i = 0; i < items.length; i++) {
if (items[i].isDropped) {
x = dropX * 160 + 10;
drawContainer(dropCtx, i, x, 20);
dropX++;
items[i].x = x;
} else {
x = canvasX * 160 + 10;
drawContainer(ctx, i, x, 20);
canvasX++;
items[i].x = x;
}
}
}
// draw image container
function drawContainer(context, index, x, y) {
context.beginPath();
context.rect(x, y + frameHeight, frameWidth, 30);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.fillStyle = "white";
context.font = "10pt Verdana";
context.fillText(items[index].description, x + 10, y + frameHeight + 18);
// draw a thumbnail of the image
var img = images[index];
if (img.width >= img.height) {
context.drawImage(img, 0, 0, img.width, img.height,
x, y, 128, 128 * img.height / img.width);
} else {
context.drawImage(img, 0, 0, img.width, img.height,
x, y, 128 * img.width / img.height, 128); // edited s/b [,128], not [/128]
}
// outer frame (green if selected)
context.beginPath();
context.rect(x - 2, y - 2, frameWidth + 4, frameHeight + 30 + 4);
context.lineWidth = 3;
context.strokeStyle = "lightgray";
if (items[index].isSelected) {
context.strokeStyle = "green";
context.drawImage(checkmark, x + frameWidth - 30, y + frameHeight + 3);
}
context.stroke();
}
function handleMouseDown(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// Put your mousedown stuff here
mouseIsDown = true;
}
function handleMouseUp(e) {
mouseIsDown = false;
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// Put your mouseup stuff here
for (var i = 0; i < items.length; i++) {
var item = items[i];
// have we clicked on something?
if (!item.isDropped && mouseX >= item.x && mouseX <= item.x + frameWidth) {
// if so, toggle its selection
items[i].isSelected = !(items[i].isSelected);
draw();
}
}
}
function handleMouseOut(e) {
if (!mouseIsDown) { return; }
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// Put your mouseOut stuff here
}
function handleMouseMove(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// Put your mousemove stuff here
}
function handleDrop(e) {
for (var i = items.length - 1; i >= 0; i--) {
if (items[i].isSelected) {
items[i].isDropped = true;
items[i].isSelected = false;
console.log(i);
}
}
draw();
}
$("#canvas").mousedown(function (e) { handleMouseDown(e); });
$("#canvas").mousemove(function (e) { handleMouseMove(e); });
$("#canvas").mouseup(function (e) { handleMouseUp(e); });
$("#canvas").mouseout(function (e) { handleMouseOut(e); });
$("#dropzone").mouseup(function (e) { handleDrop(e); });
}); // end $(function(){});
</script>
</head>
<body>
<p>Click an item to toggle it's selection</p>
<p>Drag from top to bottom canvas to drop selected items</p>
<canvas id="canvas" width=500 height=200></canvas><br />
<canvas id="dropzone" width=500 height=200></canvas>
</body>
</html>