Question

我的HTML页面中有一个表单元素，当前从一个画布（toDataURL()）检索canvas2并将图像绘制到第二个画布（outputCanvas）。我需要的是onclick事件来检索画布图像并在此函数中使用该图像。截至目前我能够手动将画布图像保存为.png，然后将文件硬编码到此函数中，但是当单击按钮时我需要这一切。我是.js的新手，但我可以处理伪代码，如果它更容易解释，但请具体。发生单击时需要处理以下draw()。我有下面的监听器应该调用draw()。

function init () {
         canvas = document.getElementById('anotherCanvas');  
         ctx = canvas.getContext('2d');       
         draw ();
         }

function draw() {   
        img = new Image();  
        img.src = 'recursed1.png';        
        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)));   
            }

以下内容目前独立于上述内容，如果我手动保存＆amp ;,我只能得到上述功能。硬编码在独立画布（canvas2）中创建的图像。我需要两个人一起工作。 HTML元素：

<input type="button" id="recImage" value="Recurse Image">


var formElement = document.getElementById("createImageData"); 
formElement.addEventListener('click', createImageDataPressed, false);

function createImageDataPressed(e) { 
  var imageDataDisplay = document.getElementById("imageDataDisplay"); 
  imageDataDisplay.value = canvas2.toDataURL(); 
  var newImagewindow.open(canvas2.toDataURL(),
          "canvasImage","right=300,top=400,width="canvas2.width + ",height=" + 
      canvas2.height + ",toolbar=0,resizable=0");
 }

以上是我最近的尝试，它不起作用......没有什么是一成不变的，如果有比我尝试更好的路线，请告诉我。 this work in progress may help you understand what Im trying to do

Answer 1

据我了解，您希望在点击init时调用data和formElement，对吗？

只需在init中添加对data和createImageDataPressed的通话，或向click添加更多formElement处理程序。

如何将此函数放入表单元素按钮？

1 个答案: