Javascript 在对象（内存中）中缓存画布

我试图缓存用户为画布设置的不同状态

问题是使用

.push

和

canvas.clone（）

当我稍后附加它时，它的大小是相同的，但是是白色的；没有它显示的图像

有没有可能在内存中存储

canvas

-编辑-

这就是我努力的方向

effectosFotos: function ($foto) {
        var t;
        var selector = '#'+$foto.attr('id');
        var $foto = $(selector);
        var $backup = $foto.clone();
        var times = 0;
        var cached = [];

        $('.filters').show();

    var img1 = document.createElement('img');
    img1.onload = function () {
        var width1 = $('.filters li').eq(0).width()/3;
        var height1 = this.height*(width1/this.width);

        console.log(width1, height1);

        var canvas1 = document.createElement('canvas'),
                ctx1 = canvas1.getContext('2d');
        canvas1.width = width1;
        canvas1.height = height1;

            ctx1.drawImage(this, 0, 0, width1, height1);
        var newUrl = canvas1.toDataURL('image/jpeg', 0.8);
        $('.filters li a').each(function() {
                $(this).append( '<img id="preview_'+$(this).data('id')+'" src="'+newUrl+'">'  );  
        });



        $('.filters li a').each(function(i) {
                var $this = $(this);
                t = setTimeout(function () {
                    var effect = $this.data('id');
                    var $img = $('#preview_'+effect);
                    //console.log('Item='+i +' About to render '+ effect +' and exists? ' + $img.length );
                    Caman('#preview_'+effect, function () {
                        this[effect]();
                        this.render(function(){
                                 //console.log('rendered '+effect);
                                 $this.parent().addClass('rendered');
                        });
                    }); 

                }, 1*i)


        });
    }
        img1.src = $foto.attr('src');       

        $('.filters').on('click', 'li:not(.active) a', function(e){
            var start = new Date().getTime();
            var $this = $(this).addClass('loading');
            $this.parent().addClass('loading');


            e.preventDefault();
            var effect = $(this).data('id');
            var parent = $(selector).parent();
            //console.log('f'+$(selector).length, effect,times,$(selector).prop("tagName"),$backup.prop("tagName"));
            /*if(times == 0){
                    $backup = $foto.clone();
            }
            times++;*/
            $(selector).remove();
            parent.append($backup);
            console.log(cached);

            var found = -1;
            for ( var c = 0; c < cached.length; c++ ) {
                var item = cached[c];
                if ( item.effect == effect ) {
                    found = c;
                } 
            }
            if (effect == 'normal'){
                $(selector).css('opacity',1);
                $this.parent().addClass('active').removeClass('loading').siblings().removeClass('active');
            } else if ( found > -1 ) {



            console.log('Cargamos caché  ' + effect + ' a '+width +'x'+height);
            var canvas = document.getElementById($foto.attr('id'))
            canvas.width = width;
            canvas.height = height;
            var ctx3 = canvas.getContext('2d');
            ctx3.clearRect(  0, 0, width, height );
            ctx3.drawImage( cached[found].canvas, 0, 0);
            $this.parent().addClass('active').removeClass('loading').siblings().removeClass('active');
      } else  {
            $(selector).remove();
            parent.append($backup);
            $(selector).css('opacity',0.3); 
            $('.takePictureHolder').addClass('caming');
            Caman(selector, function () {
                this[effect]();
                this.render(function(){
                    $(selector).css('opacity',1);  
                    $this.parent().addClass('active').removeClass('loading').siblings().removeClass('active');
                    $('.takePictureHolder').removeClass('caming');
                    if (found == -1) {
                        var canvas = document.getElementById($foto.attr('id'));
                        var clone = canvas.cloneNode(true);
                           clone.getContext('2d').drawImage(canvas, 0,0);
                        cached.push({ 'effect' :effect, "canvas":clone });
                        /*var ctx4 = document.getElementById($foto.attr('id')).getContext('2d');
                        console.log('Cacheamos ' + effect + ' a '+width +'x'+height);
                        cached.push({ 'effect' :effect, "canvas":ctx4.getImageData(0,0,width, height) });*/
                    }
                    var end = new Date().getTime();
                    var time = end - start;
                    console.log('Execution time: ' + time);
                }); 
            });         
        }       
        });
    }

effectosFotos:function（$foto）{
变量t；
变量选择器=“#”+$foto.attr（'id'）；
变量$foto=$（选择器）；
var$backup=$foto.clone（）；
var时间=0；
var缓存=[]；
$（'.filters'）.show（）；
var img1=document.createElement（'img'）；
img1.onload=函数（）{
var width1=$（'.filters li'）.eq（0）.width（）/3；
var height1=此高度*（宽度1/此宽度）；
控制台。原木（宽1，高1）；
var canvas1=document.createElement（'canvas'），
ctx1=canvas1.getContext（'2d'）；
画布1.宽度=宽度1；
画布1.高度=高度1；
ctx1.drawImage（这个，0，0，宽度1，高度1）；
var newUrl=canvas1.toDataURL（'image/jpeg'，0.8）；
$（'.filters li a'）。每个（函数（）{
$（此）。附加（“”）；
});
$（'.filters li a'）。每个（函数（i）{
var$this=$（this）；
t=设置超时（函数（）{
var effect=$this.data（'id'）；
var$img=$（“#预览”+效果）；
//log（'Item='+i+'即将呈现'+effect+'并且存在？'+$img.length））；
卡曼（“#预览”+效果、功能（）{
这[效果]（）；
this.render（函数（）{
//console.log（“呈现的”+效果）；
$this.parent（）.addClass（'rendered'）；
});
}); 
}，1*i）
});
}
img1.src=$foto.attr（'src'）；
$（'.filters'）。在（'click'，'li:not（.active）a'，函数（e）{
var start=new Date（）.getTime（）；
var$this=$（this.addClass（'loading'）；
$this.parent（）.addClass（'loading'）；
e、 预防默认值（）；
var effect=$（this.data（'id'）；
var parent=$（选择器）.parent（）；
//console.log（'f'+$（选择器）.length，effect，times，$（选择器）.prop（“标记名”），$backup.prop（“标记名”）；
/*如果（次数==0）{
$backup=$foto.clone（）；
}
时代++*/
$（选择器）.remove（）；
parent.append（$backup）；
console.log（缓存）；
发现的var=-1；
对于（var C＝0；C＜caseDe.Calth+；C++）{
var item=cached[c]；
如果（item.effect==效果）{
发现=c；
} 
}
如果（效果=‘正常’）{
$（选择器）.css（'opacity'，1）；
$this.parent（）.addClass（'active'）.removeClass（'loading'）.sides（）.removeClass（'active'）；
}否则如果（发现>-1）{
console.log（'Cargamos caché'+效果+a'+宽度+x'+高度）；
var canvas=document.getElementById（$foto.attr（'id'））
画布宽度=宽度；
canvas.height=高度；
var ctx3=canvas.getContext（'2d'）；
ctx3.clearRect（0，0，宽度，高度）；
ctx3.drawImage（缓存的[found].canvas，0,0）；
$this.parent（）.addClass（'active'）.removeClass（'loading'）.sides（）.removeClass（'active'）；
}否则{
$（选择器）.remove（）；
parent.append（$backup）；
$（选择器）.css（'opacity'，0.3）；
$（'.takePictureHolder'）.addClass（'caming'）；
Caman（选择器，功能（）{
这[效果]（）；
this.render（函数（）{
$（选择器）.css（'opacity'，1）；
$this.parent（）.addClass（'active'）.removeClass（'loading'）.sides（）.removeClass（'active'）；
$（'.takePictureHolder'）.removeClass（'caming'）；
如果（找到==-1）{
var canvas=document.getElementById（$foto.attr（'id'））；
var clone=canvas.cloneNode（true）；
clone.getContext（'2d'）.drawImage（canvas，0,0）；
push（{'effect'：effect，“canvas”：clone}）；
/*var ctx4=document.getElementById（$foto.attr（'id'））.getContext（'2d'）；
console.log（'Cacheamos'+效果+a'+宽度+x'+高度）；
push（{'effect'：effect，“canvas”：ctx4.getImageData（0,0，width，height）}）*/
}
var end=new Date（）.getTime（）；
var时间=结束-开始；
log（'执行时间：'+时间）；
}); 
});         
}       
});
}

您可以使用保存画布的内容。
以及恢复旧内容

var数据=[]；
//存储画布/图像
push（context.getImageData（0，0，canvas.width，canvas.height））；
//还原画布/图像
var oldData=data.pop（）；
canvas.width=oldData.width；
canvas.height=oldData.height；
clearRect（oldData，0，0，canvas.width，canvas.height）；
putImageData（oldData，0,0）；

var canvas=document.querySelector（“canvas”），
context=canvas.getContext（“2d”），
州=[]，
img；
日志（“设置状态…”）；
setupState（）；
函数rndColor（）{
var rgb=[]；
对于（变量i=0；i<3；i++）{
rgb.push（Math.floor（Math.random（）*255））；
}
返回“rgb（“+rgb.join（“，”+”）”；
}
函数setupState（）{
canvas.width=50+Math.floor（Math.random（）*100）；
canvas.height=50+Math.floor（Math.random（）*100）；
context.fillStyle=rndColor（）；