Question

 var formElement2 = document.getElementById("recImage");
 formElement2.addEventListener('click', recImagePressed, false);

 function recImagePressed(e){
     var outputCanvas = document.getElementById("outputCanvas");
     outputCtx = outputCanvas.getContext('2d');
     outputCTX.draw();
     outputCtx.drawImage(canvas2, 0, 0);
 }

 function draw() {   
            img = new Image();  
            **img.src = context2.canvas2.toDataURL();** 
            fr1 = makeFrame(context2, makeVect(400,0), makeVect(400, 0), makeVect(0, 400));
            img.onload = function(){ 
                context2.save(); 
                newPainter = cornerSplit(imagePainter,5);
                newPainter(fr1);     
                context2.restore();
                context2.save();
                newPainter(flipHorizLeft(fr1));
                context2.restore();
                context2.save();
                newPainter(flipVertDown(fr1));  
                context2.restore();
                context2.save();
                newPainter(flipVertDown(flipHorizLeft(fr1)));   
            }  
        }

我认为问题在于：img.src = context2.canvas2.toDataURL（）;

正在调用的方法已经过测试，并且独立于此特定代码块而工作。

Answer 1

您没有在任何地方声明的名为context2的变量。这是（第一）原因，你所拥有的东西不起作用。

你想做什么？ Draw an image to a canvas?

Answer 2

img.src = context2.canvas2.toDataURL();

没有任何意义。画布上下文没有名为canvas2的属性。如果变量存在，请使用变量canvas2或使用context2.canvas。

很难说你想要做什么，因为img甚至没有使用过，但如果你想在某个时候画一个画布到另一个画布，你可以使用drawImage画布作为参数，所以如果那就是你要做的事情，你就不必制作图像并使用toDataUrl。

如何将画布图像添加到函数中？

2 个答案: