我正在嘗試使用Raymond Camden的水印代碼以及來自Phonegap相機API的示例。畫布未定義

相機運作良好。

然而，

Uncaught ReferenceError: canvas is not defined

示於logcat中。

我試圖將函數中的變量放在全局變量中。但錯誤仍然出現。我的代碼如下：

<!DOCTYPE html> 
<head> 
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.1.min.css"/> 
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script> 
<script type="text/javascript" charset="utf-8"> 

var watermark; 
var canvasDOM; 
var canvas; 


document.addEventListener("deviceready",onDeviceReady,false); 


function onDeviceReady() { 

} </script> 

<script type="text/javascript" charset="utf-8"> 

    canvasDOM = $("myCanvas")[0]; 
    canvas = canvasDOM.getContext("2d"); 

    watermark = new Image(); 
    watermark.src = "q1.jpg"; 

    function cybershot() { 
    navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI}); 
    } 

    function camError(e) { 
    console.log("Camera Error"); 
    console.log(JSON.stringify(e)); 
    } 


    function camSuccess(picuri) { 
    console.log("Camera Success"); 

    var img = new Image(); 
    img.src=picuri; 

    img.onload = function(e) { 
     canvas.drawImage(img, 0, 0); 
     canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height); 
    } 


    } 


</script> 


<style> 
#myCanvas { 
    width: 400px; 
    height: 400px; 
} 
</style> 


    </head> 
    <body> 
    <h1>Watermark Camera</h1> 


    <button onclick="cybershot();">Capture Photo</button> <br> 


    <p/> 

    <canvas id="myCanvas"></canvas> 
</body> 
</html>

來源

2013-06-21 Sunny Poong

解決方案

還有在這個代碼中的錯誤。

使用Javascript必須放置在onDeviceReady()函數中。它相當於傳統的jQuery文件準備就緒。

在JavaScript是一種HEAD之前BODY內容內執行這種情況下被裝載到DOM。 onDeviceReady()將延遲執行，直到所有內容加載到DOM。

固定碼

您的JavaScript應該是這樣的：

var canvas; 
var watermark; 

document.addEventListener("deviceready",onDeviceReady,false); 

function onDeviceReady() { 
    canvasDOM = $("myCanvas")[0]; 
    canvas = canvasDOM.getContext("2d"); 

    watermark = new Image(); 
    watermark.src = "q1.jpg";  
} 

function cybershot() { 
    navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI}); 
} 

function camError(e) { 
    console.log("Camera Error"); 
    console.log(JSON.stringify(e)); 
} 


function camSuccess(picuri) { 
    console.log("Camera Success"); 

    var img = new Image(); 
    img.src=picuri; 

    img.onload = function(e) { 
     canvas.drawImage(img, 0, 0); 
     canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height); 
    } 
}

來源

2013-06-21 09:27:41 Gajotres

我試過你的解決方案，我能夠縮小這個錯誤。現在，我發現getContext未能被調用。我想知道任何可能的建議？ @Gajotres –

我解決了這個問題，現在完美工作。非常感謝您的意見和建議。 –

嘗試移動這部分（腳本塊的全部內容）canvasDOM = $("myCanvas")[0];到$(document).ready(function(){ });

來源

2013-06-21 08:03:56

我解決了這個問題，現在可以正常使用。非常感謝您的意見和建議。 –

畫布未定義

回答

解決方案

固定碼

相關問題