存储本地图片在另一个页面上传

Question

我必须做一个不会上传图片的图片输入。这些图像将在另一个页面中使用，在那里将对其进行编辑（裁剪和绘制）然后上传。

我不知道该怎么做，你有什么想法吗？我可能会使用这个 plugin.

Answer 1

您已使用 getElementByID 获取图像。将图片转换为base64并保存在本地存储

userimage = document.getElementById('imageId');
imageData = getBase64Image(userimage);
localStorage.setItem("imageData", imageData);

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

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

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

在您的第二个页面中插入脚本以从本地存储获取图像并设置为图像 src

window.onload = function() {
 var getpicture = localStorage.getItem('imageData');
 var image = document.createElement('img');
 image.src = getpicture;
};

存储本地图片在另一个页面上传

Store local image to upload in another page

javascript

php

jquery

image

jquery-file-upload