Html DrawCanvas имеет значение null

Я пытаюсь дублировать свой холст, но он меня бросает drawCanvas имеет значение. Всякий раз, когда я нажимаю кнопку, он бросает мне ошибку. Есть ли другой способ дублировать мой холст?Html DrawCanvas имеет значение null

HTML

<Html> 
<Head> 
<Title>Java Example</Title> 

     <script type="text/javascript"> 
{ 

if (!window.Clipboard) { 
    var pasteCatcher = document.createElement("apDiv1"); 
    pasteCatcher.setAttribute("contenteditable", ""); 
    pasteCatcher.style.opacity = 0; 
    //document.body.appendChild(pasteCatcher); 
    pasteCatcher.focus(); 
    document.addEventListener("click", function() { pasteCatcher.focus(); }); 
} 

//window.addEventListener("paste", onPasteHandler); 

function onPasteHandler(e) 
{ 
    if(e.clipboardData) { 
     var items = e.clipboardData.items; 
     if(!items){ 
      alert("Image Not found"); 
     } 
     for (var i = 0; i < items.length; ++i) { 
     if (items[i].kind === 'file' && items[i].type === 'image/png') { 
      var blob = items[i].getAsFile(), 
       source = window.webkitURL.createObjectURL(blob); 

      pastedImage = new Image(); 
      pastedImage.src = source; 

      pasteData(); 
      } 
     } 
    } 
} 

function pasteData() 
{ 
    drawCanvas = document.getElementById('drawCanvas1'); 
    ctx = drawCanvas.getContext('2d'); 
    ctx.clearRect(0, 0, 640,480); 
    ctx.drawImage(pastedImage, 0, 0); 
} 

function pasteData2() 
{ 
    drawCanvas = document.getElementById('drawCanvas1'); 
    ctx = drawCanvas.getContext('2d'); 
    ctx.clearRect(0, 0, 640,480); 
    ctx.drawImage(pastedImage, 0, 0); 
    image2 = convertCanvasToImage(drawCanvas); 
    document.getElementById("canvasHolder").appendChild(image2); 
} 

// Converts image to canvas; returns new canvas element 
      function convertImageToCanvas(image) { 
      var canvas = document.createElement("canvas"); 
       canvas.width = image.width; 
       canvas.height = image.height; 
       canvas.getContext("2d").drawImage(image, 0, 0);     
       return canvas; 
      } 

      // Converts canvas to an image 
      function convertCanvasToImage(canvas) { 
       var image = new Image(); 
       image.src = canvas.toDataURL("image/png"); 
       return image; 
      } 
} 

     </script> 
<style type="text/css"> 
#apDiv1 { 
    position:absolute; 
    width:258px; 
    height:165px; 
    z-index:1; 
    left: 71px; 
    top: 59px; 
} 
</style> 
</Head> 

<Body> 
<div id="apDiv1" contenteditable='true'>Paste Test</div> 
<!--div id='div' contenteditable='true'>Paste</div--> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<button type="button" value="click me" onclick="return pasteData2();" /> 
<h2>Canvas Image</h2> 
    <p id="canvasHolder"> 

    </p> 
</Body> 
</Html>

Ошибка enter image description here

источник

2013-07-17 chinna_82

Нам нужна дополнительная информация для понимания. Какая ошибка вы получаете и где? Получение холста по его идентификатору должно работать отлично. Можете ли вы также показать HTML, где вы определили свой холст? И вы используете глобальную переменную для drawCanvas, которая, вероятно, даст вам неприятное время. – Malharhak

@Malharhak. Я редактирую вопрос и публикую весь HTML. Я получил ошибку, когда я нажал кнопку. –

Ну, ваш холст нигде не создан, и ваша функция, создающая холст, никогда не называется (и не дает ему представления о холсте, который вы пытаетесь получить) – Malharhak

сначала вы должны зарегистрироваться на мероприятие изображение OnLoad, чтобы убедиться, что изображение загружено:

 // inside onPastHandler ... 

     pastedImage = new Image(); 
     pastedImage.onload = pasteData.bind(null,pastedImage); 
     pastedImage.src = source;

Тогда вы mentionning Беспоставочной -существующий холст, 'drawCanvas1', который вам не нужен даже нужен:

function pasteData(img) { 
     document.getElementById("canvasHolder").appendChild(img); 
}

источник

2013-07-17 12:03:08 GameAlchemist

my pasteData() работает нормально. Я вижу, что моя картинка красиво. Проблема возникает, когда я нажал на кнопку. Ошибка в файле pasteData2(). Вы можете попробовать запустить его в своем локальном режиме, и вы увидите ошибку после нажатия кнопки. –

Html DrawCanvas имеет значение null

ответ

Смежные вопросы