Question

我有适当的功能，将根据列出的功能渲染绘图，我的问题是如何将该绘图发送到该功能？（我的输入标签尝试列在函数js下面。）

以下是处理最终图像的功能 - ＆gt;

 function recurseImage() {   
    img = new Image();  
    img.src = myCanvas.toDataUrl();  
    fr1 = makeFrame(ctx, makeVect(400,0), makeVect(400, 0), makeVect(0, 400));
    img.onload = function(){ 
            ctx.save(); 
            newPainter = cornerSplit(imagePainter,5);
            newPainter(fr1);     
            ctx.restore();
            ctx.save();
            newPainter(flipHorizLeft(fr1));
            ctx.restore();
            ctx.save();
            newPainter(flipVertDown(fr1));  
            ctx.restore();
            ctx.save();
            newPainter(flipVertDown(flipHorizLeft(fr1)));   
}

}

<input type="button" name="recurseImage" id='recurseImage' value="Recurse It"    onClick"recurseImage()"/>

我希望允许用户只需单击将新创建的画布图像发送到此函数的btn，并在单独的窗口中显示“recursedImage”，用户可以根据需要将其保存为png文件。我预感谢你，非常感谢任何建议。

Answer 1

以下是一个工作示例：http://phrogz.net/tmp/canvas_recursion.html

以下是代码：

var img = new Image;
var levels = 0;
img.onload = function(){
  if (++levels>4) return;
  ctx.drawImage(img,0,0,320,240);
  ctx.drawImage(img,320,0,320,240);
  ctx.drawImage(img,320,240,320,240);
  ctx.drawImage(img,0,240,320,240);
  setTimeout(function(){ img.src = ctx.canvas.toDataURL() },1000);
};
img.src = 'gkhead.jpg';

广义：

var img = new Image;
img.onload = function(){
  if (allDoneRecursing()) return;
  drawNewImageToContext();
  img.src = ctx.canvas.toDataURL();
};
img.src = seedImageSrc(); // You may want a toDataURL() on another canvas here

请注意，这会使用图像作为递归的中介，只要您不在每次迭代时对结果进行升级，就应该没问题。如果您需要合成实际缩放/转换的画布上下文命令，请说明。

如何将用户生成的画布绘制并发送到递归调用该绘图的函数？

1 个答案: