みんな!javascript-キャンバスを画像データに変換できません
私は、ユーザーがブラウザで有効になっているWebカメラから画像をキャプチャできるようにするデモをしようとしています。この画像はAJAX呼び出しを使用してPHPサービスに渡すことでバックエンドに保存されます。
私はキャンバスとして捉えることができるが、画像データに変換することはありませんよ。 私はcanvas is undefined error
セットアップは非常に簡単です取得しています。
HTML
<video id="videoElement" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" style="display:none" ></canvas>
JAVASCRIPT
// Grab elements, create settings, etc.
var video = document.getElementById('videoElement');
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('videoElement');
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
var cann= context.drawImage(video, 0, 0, 640, 480); //draw canvas
//then convert canvas to image so i can obtain dataurl
//and pass it to another function using AJAX
var img= convertCanvasToImage(cann);
console.log(img);
});
// Converts canvas to an image
function convertCanvasToImage(canvas)
{
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
私は、このフィールドにはかなり新しいです。もう一つ質問があります。最新のブラウザでも動作しますか? 誰でも私が作った間違いを理解する手助けはできますか?
参考:代わりにcann
var img= convertCanvasToImage(canvas);
これは、同じファイル内にあります。 –
最初の解決方法はあなたにとって最適です:)。それがあなたを夢中にしてくれることを願っています –
キャプチャされたショットの品質を向上させる方法はありますか?今は品質が悪いです。 @Manoj Lodhi –