Question

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

我想，

- 将图像保存到LocalSrorage中 - 将文件保存到LocalStorage中 - 通过IndexDB保存图像和文件

请有人帮助我。谢谢你的进步。

＆＃13;

<!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>

＆＃13;

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

0 个答案: