Question

我想在HTML视频元素中播放视频，并在暂停时拍摄快照。快照显示在画布内的页面上。现在我希望同一个快照出现在另一个页面上，为此我尝试使用toDataUrl()方法＆amp;编码基础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

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

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

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

将画布从一个页面复制到另一个页面而不超过最大字符限制

2 个答案: