如何使用相机API并将图片设置为canvas标签
Posted
技术标签:
【中文标题】如何使用相机API并将图片设置为canvas标签【英文标题】：How to use the camera API and set the picture to the canvas tag 【发布时间】：2013-10-09 22:11:50 【问题描述】：我需要编写在 phonegap 中使用相机 API 并将图像设置为定义的画布的 html 代码。我在网上找到了一些应该可以工作的代码（还包括水印），但它不会向画布返回任何内容。有人能告诉我我错过了什么吗？我是 html 和 javascript 的新手，只是想弄清楚这个特定部分是如何工作的，然后我将其扩展为包含其他图像以叠加在从相机拍摄的照片的顶部。
谢谢
<!DOCTYPE html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
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);
</script>
<style>
#myCanvas
width: 400px;
height: 400px;
</style>
</head>
<body>
<h1>Watermark Camera</h1>
<button onclick="cybershot();">Capture Photo</button> <br>
<p>Canvas:</p>"
<canvas id="myCanvas"></canvas>
</body>
</html>
【问题讨论】：
【参考方案1】：如果您的代码不需要画布，您可以使用fiddle 中概述的简单而干净的方法：
function onSuccess(imageData)
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
或者，如果您确实需要使用画布，请参考this fiddle，这表明您可以采用程序化图像元素并将其绘制到画布上：
function onSuccess(imageData)
var image = new Image();
image.src = "data:image/jpeg;base64," + imageData;
image.onload = function ()
var height = 100;
var width = 100;
context.drawImage(image, width, height);
让我知道你是怎么做的 :)
【讨论】：
如果这是您问题的答案，请将其标记为这样，以便将来帮助其他人以上是关于如何使用相机API并将图片设置为canvas标签的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Android API 将相机预览大小设置为全屏？