将 canvas 从一页复制到另一页而不超过最大字符数限制

Question

我想在 HTML 视频元素中播放视频并在暂停时拍摄快照。快照显示在页面内 canvas。现在我希望相同的快照出现在另一个页面上，为此我尝试使用 toDataUrl() 方法以 base 64 编码快照并通过 URL.

传递它

但是 URL 的最大长度可以是 2048 个字符，而 toDataUrl 的输出要大得多。如何进行？

工作正常：

video.addEventListener('pause', function(){ 
                        $(this).hide();
                        $("#canvas1").show();
                        draw( video, thecanvas, img); 
        }, false);

function draw(video,thecanvas,img){

        var context = thecanvas.getContext('2d');
        context.drawImage(video,0,0,thecanvas.width,thecanvas.height);
        var dataURL = thecanvas.toDataURL('image/jpeg',.1);
        img.setAttribute('src',dataURL);

    }

不工作：指向另一个页面的功能

function toskuentry(){
    var imgsrc = $('#thumbnail_img').attr('src');
    window.location.href = "sku_entry.php?imgsrc="+imgsrc;

}

Answer 1

一个不错的选择是使用 Firebase。他们有这样做的例子。 https://www.firebase.com/tutorial/#session/n24v8lvnltc

Firebase 在离线时使用本地存储，这意味着如果您不想使用 Firebase，也可以使用本地存储。

类似

localStorage["data"] = dataURL;

//...other page
var dataURL = JSON.parse(localStorage["data"]);

Answer 2

不要通过 URL 传递它，使用 HTML5 网络存储。您可以使用 sessionStorage 或 localStorage:

function toskuentry(){
    localStorage.setItem("img", $('#thumbnail_img').attr('src'));
}

在下一页您可以通过localStorage.getItem("img");访问它。