javascript - 将 Canvas 缓存在对象中(在内存中)

Question

我正在尝试缓存用户为 Canvas 设置的不同状态，

问题是，当我稍后附加它时，使用 .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);
                }); 
            });         
        }       
        });
    }

Answer 1

比导出方法更简单、更有效的方法是使用 clonedCtx.drawImage(canvas, 0,0) 在克隆上绘制要保存的 Canvas 。然后，您将能够将克隆的 Canvas 存储在数组中:

Andreas 的代码片段经过修改:

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    states = [];

console.log('setup states...');
setupState();


function rndColor() {
    var rgb = [];
    
    for (var i = 0; i < 3; i++) {
        rgb.push(Math.floor(Math.random() * 255));
    }
    
    return "rgb(" + rgb.join(",") + ")";
}

function setupState() {
    canvas.width = 50 + Math.floor(Math.random() * 100);
    canvas.height = 50 + Math.floor(Math.random() * 100);
    context.fillStyle = rndColor();
    context.fillRect(0, 0, canvas.width, canvas.height);

    var clone = canvas.cloneNode(true);
    clone.getContext('2d').drawImage(canvas, 0,0);
    states.push(clone)

    if (states.length < 5) {
        setTimeout(setupState, 1000);
    } else {
        console.log("restore states...");
    	setTimeout(restoreStates, 2000);
    }
}

function restoreStates() {
    var state = states.shift();
    
    canvas.width = state.width;
    canvas.height = state.height;
    
    context.clearRect(0, 0, state.width, state.height);
    context.drawImage(state, 0, 0);
    
    if (states.length) {
        setTimeout(restoreStates, 1000);
    }
}

canvas { border: solid 5px blue }

<canvas></canvas>

但是，正如 @markE 所指出的，如果您需要存储大量这些状态(例如，如果您想实现撤消/重做功能)，它会很快填满您的所有内存。

那么推荐的方法是保存所有绘图操作并重新应用它们。仍然使用 Andreas 的代码片段，最小的实现可能是:

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    states = [];

console.log('setup states...');
setupState();


function rndColor() {
    var rgb = [];
    
    for (var i = 0; i < 3; i++) {
        rgb.push(Math.floor(Math.random() * 255));
    }
    
    return "rgb(" + rgb.join(",") + ")";
}

function setupState() {
    // create an object with all our states settings and operations
    var state = {fillStyle: rndColor(), width: Math.floor(Math.random() * 100), height:Math.floor(Math.random() * 100)};
    // save the operations in an array
    state.operations = [{name:'fillRect',arguments: [0,0,state.width, state.height]}];
    // save the state
    states.push(state);
    // parse it a first time;
    parse(state);
  
    if (states.length < 5) {
        setTimeout(setupState, 1000);
    } else {
        console.log("restore states...");
    	setTimeout(restoreStates, 2000);
    }
}

function parse(state){
    // restore our canvas and context's properties
    // this could be improved by creating canvas and context objects in our state and then restore the corresponding with a for(x in y) loop
    canvas.width = state.width;
    canvas.height = state.height;
    context.fillStyle = state.fillStyle;
    // retrieve the operations we applied
    var op = state.operations;
    // loop through them
    for(var i=0; i<op.length; i++){
      // check it actually exists as a function
      if(typeof context[op[i].name]==='function')
        // apply the saved arguments
        context[op[i].name].apply(context, op[i].arguments);
      }
  }

function restoreStates() {
    var state = states.shift();
    parse(state);
    if (states.length) {
        setTimeout(restoreStates, 1000);
    }
}

canvas { border: solid 1px blue }

<canvas></canvas>