javascript - 将 Canvas 从一页复制到另一页而不会超过最大字符数限制

我想在HTML video元素中播放视频并在暂停时拍摄快照。快照显示在画布内的页面上。现在，我希望相同的快照出现在另一页上，为此，我尝试使用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;

}

最佳答案

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

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

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