Как я могу поместить эту функцию в кнопку элемента формы? - PullRequest
1 голос
/ 29 ноября 2011

У меня есть элемент формы на моей странице 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)));   
            } 

Следующее в настоящее время не зависит от вышеуказанного, я могу заставить работать вышеуказанную функцию, только если вручную сохраню и закодирую изображение, созданное на независимом холсте (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");
 } 

Выше приведена моя последняя попытка, она не работает ... Ничто не установлено в камне, и если есть лучший путь, чем тот, который я пытаюсь, пожалуйста, дайте мне знать, эта работа может помочь вам понять, что я пытаюсь сделать

1 Ответ

0 голосов
/ 29 ноября 2011

Насколько я понимаю, вы хотите, чтобы при нажатии formElement вызывались init и data, верно?

Просто добавьте вызов к init и data в createImageDataPressedили добавьте еще несколько click обработчиков к formElement.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...