Как использовать API-интерфейс камеры и установить изображение на тег canvas

Мне нужно написать html-код, который использует API-интерфейс камеры в phonegap и устанавливает изображение на определенный холст. Я нашел код онлайн, который должен работать (также включает водяной знак), но он ничего не возвращает на холст. Может ли кто-нибудь сказать мне, что мне не хватает? Я новичок в html и javascript и просто пытаюсь выяснить, как работает эта конкретная деталь, прежде чем я расширю ее, чтобы включить другие изображения, чтобы наложить поверх изображения, снятого с камеры.Как использовать API-интерфейс камеры и установить изображение на тег canvas

Благодаря

<!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>

источник

2013-10-09 user2839968

Если код не нужен холст, вы можете использовать простой и чистый метод, изложенный в этом 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); 
    } 
}

Дайте мне знать, как вы справляетесь с этим :)

источник

2014-07-04 16:39:38 Leewalkergm

Если это был ответ на вашу проблему, отметьте его как таковой, чтобы помочь другим в будущем – Leewalkergm

Как использовать API-интерфейс камеры и установить изображение на тег canvas

ответ

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