我有一个我在phonegap 3.1中创建的项目，我遇到了一个问题。该项目最终将需要在Android和IOS上工作，但目前，我只是试图让Android版本正常工作。
经过多次摆弄后，我已经能够获得canvas2image插件，将2d画布写入图片文件夹中的png，但是当我查看文件时，文件全部为黑色。画布没有写入，只有黑色图像。
HTML：
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi"> -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="js/jquery.min.js"></script>
<script src="js/canvas2image.js"></script>
<script type="text/javascript">
$(document).ready(function() {
});
</script>
</head>
<body>
<button id="saveImg" onclick="saveImg();">Save Image</button>
<br />
<canvas id="mycanvas" width=1275 height=1650></canvas> <!-- //w=1275 h=1650 -->
<image id="theimage" crossorigin="anonymous"></image>
</body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</html>
JS：
var canvas, context, myImg, imgCanvasPath, sources, phn, strAddy, petName, city, custName, state, zip, email;
var app = {
initialize: function () {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function () {
//app.receivedEvent('deviceready');
app.initCanvas();
app.buildCanvas();
},
// Update DOM on a Received Event
receivedEvent: function (id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
},
initCanvas: function () {
canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");
phn = "000111";
strAddy = "111 Anywhere Street";
petName = "Pet Name";
city = "Anywhere";
custName = "Snoop Dawg";
state = "CA";
zip = "55555";
email = "inthedoghouse@email.com";
myImage = canvas.toDataURL("image/png");
},
buildCanvas: function () {
//header
context.font = 'bold 40pt Arial';
context.fillStyle = '#000';
context.fillText('CLAIM FORM', 40, 150); //left, top
context.font = '12pt Arial';
context.fillStyle = '#000';
context.fillText('Fill out one claim form per pet. Submit itemized, legible invoices. Incomplete claim submissions may delay claim processing.', 40, 180); //left, top
//Body
//black square
context.rect(40, 220, 30, 30); //left, top, width, height
context.fillStyle = '#000';
context.fill();
context.font = 'bold 14pt Arial';
context.fillStyle = '#FFF';
context.fillText('1', 49, 242); //left, top
context.beginPath();
context.moveTo(40, 250); //position at left, angle or if equal to bottom value, pos from top
context.lineTo(1200, 250); //position at right, angle
context.lineWidth = 5;
context.stroke();
context.font = 'bold 18pt Arial';
context.fillStyle = '#000';
context.fillText('POLICYHOLDER INFORMATION', 80, 242); //left, top
context.font = 'bold 18pt Arial';
context.fillStyle = '#000';
context.fillText('POLICY NUMBER:', 80, 300); //left, top
//policy # - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(phn, 300, 300); //left, top
context.font = 'bold 14pt Arial';
context.fillStyle = '#000';
context.fillText('ADDRESS:', 600, 300); //left, top
//street addy - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(strAddy, 710, 300); //left, top
context.font = 'bold 18pt Arial';
context.fillStyle = '#000';
context.fillText('PET NAME:', 80, 350); //left, top
//pet Name - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(petName, 220, 350); //left, top
context.font = 'bold 14pt Arial';
context.fillStyle = '#000';
context.fillText('CITY:', 600, 330); //left, top
//city - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(city, 710, 330); //left, top
context.font = 'bold 18pt Arial';
context.fillStyle = '#000';
context.fillText('NAME:', 80, 400); //left, top
//Name - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(custName, 170, 400); //left, top
context.font = 'bold 14pt Arial';
context.fillStyle = '#000';
context.fillText('STATE:', 600, 360); //left, top
//state - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(state, 710, 360); //left, top
context.font = 'bold 14pt Arial';
context.fillStyle = '#000';
context.fillText('ZIP:', 950, 360); //left, top
//state - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(zip, 1000, 360); //left, top
context.font = 'bold 14pt Arial';
context.fillStyle = '#000';
context.fillText('EMAIL:', 600, 390); //left, top
//state - var
context.font = '14pt Arial';
context.fillStyle = '#000';
context.fillText(email, 710, 390); //left, top
},
saveImage: function () {
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg) {
imgCanvasPath = msg;
alert("imagePath: " + " " + msg);
},
function(err) {
alert(err);
},
canvas
);
}
};
function saveImg() {
app.saveImage();
}
因此，当输出png时，会创建一个黑色图像，并且没有任何＆＃34;画布＆＃34;已经包括了。我对此非常感到困惑，并希望它只是一个简单的错误，（也许我不会将画布输出到另一个div或其他东西？）。
希望别人对我提出建议。
谢谢！