Question

有没有办法将裁剪的图像保存到本地存储我试图将裁剪的图像存储到本地存储并获取同样的东西我经过长时间的研究后无法实现到目前为止听到但是图像没有保存到localstorage，并在将映像保存到本地存储后显示相同内容。

HTML：

 <img src="" id="image">
<input id="input" type="file" onchange="handleFiles()">

JS：

function handleFiles()
    {
        var filesToUpload = document.getElementById('input').files;
        var file = filesToUpload[0];

        // Create an image
        var img = document.createElement("img");
        // Create a file reader
        var reader = new FileReader();
        // Set the image once loaded into file reader
        reader.onload = function(e)
        {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 400;
            var MAX_HEIGHT = 300;
            var width = img.width;
            var height = img.height;

            if (width > height) {
              if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
              }
            } else {
              if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
              }
            }
            canvas.width = width;
            canvas.height = height;

            ctx.drawImage(img, 0, 0, width, height);

            var  = canvas.toDataURL("image/png");
            document.getElementById('image').src = dataurl;     
        }

          localStorage.setItem("imgData", dataurl);
        // Load files into file reader
        reader.readAsDataURL(file);


        // Post the data
        /*
        var fd = new FormData();
        fd.append("name", "some_filename.jpg");
        fd.append("image", dataurl);
        fd.append("info", "lah_de_dah");
        */
    }

Answer 1

dataurl变量初始化的位置？

这是正确的代码：

function handleFiles() {
    var filesToUpload = document.getElementById('input').files;
    var file = filesToUpload[0];

    var img = document.createElement("img");
    var reader = new FileReader();
    var dataurl;

    reader.onload = function(e) {
        console.log("change");
        img.src = e.target.result;

        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 300;
        var width = img.width;
        var height = img.height;

        if (width > height) {
            if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
            }
        } else {
            if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
            }
        }
        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(img, 0, 0, width, height);

        dataurl = canvas.toDataURL("image/png");
        document.getElementById('image').src = dataurl;     
    }

    localStorage.setItem("imgData", dataurl);
    reader.readAsDataURL(file);
}

调整大小并显示相同后，将图像保存到localstorage HTML

1 个答案: