javascript- 无法将 canvas 转换为图像数据
javascript- unable to convert canvas to image data
伙计们!
我正在尝试制作一个演示,用户可以使用该演示从通过他的浏览器启用的网络摄像头捕获图像,并且该图像将通过将其传递到 PHP 服务使用 AJAX 调用。
我能够捕捉为 canvas 但无法将其转换为图像数据。
我得到 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;
}
我是这个领域的新手。我还有一个问题。这适用于最新的浏览器吗?
谁能帮我找出我犯的错误?
传递 canvas
对象而不是 cann
var img= convertCanvasToImage(canvas);
就叫这个
var img= convertCanvasToImage();
function convertCanvasToImage()
{
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
无需像您在上面定义的 canvas 那样传递 canvas。但是如果你在另一个文件中有 convertCanvasToImage 函数,那么你可以使用
var img= convertCanvasToImage(canvas);
这可能会有所帮助。
function demoFromHTML() {
html2canvas(document.getElementById("talltweets"), {
onrendered: function(canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
}
});
}
如果您可以尝试避免使用 dataURL 并改用 blob - 它将为您节省更多内存并且 load images faster
$canvas.toBlob(function(blob){
var url = URL.createObjectURL(blob)
var img = new Image
img.onload = function() {
URL.revokeObjecURL(this.src)
}
img.src = url
console.log(blob)
console.log(url)
})
<canvas id="$canvas">
您可以使用 polyfill 来支持 canvas#toBlob
伙计们!
我正在尝试制作一个演示,用户可以使用该演示从通过他的浏览器启用的网络摄像头捕获图像,并且该图像将通过将其传递到 PHP 服务使用 AJAX 调用。
我能够捕捉为 canvas 但无法将其转换为图像数据。
我得到 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;
}
我是这个领域的新手。我还有一个问题。这适用于最新的浏览器吗? 谁能帮我找出我犯的错误?
传递 canvas
对象而不是 cann
var img= convertCanvasToImage(canvas);
就叫这个
var img= convertCanvasToImage();
function convertCanvasToImage()
{
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
无需像您在上面定义的 canvas 那样传递 canvas。但是如果你在另一个文件中有 convertCanvasToImage 函数,那么你可以使用
var img= convertCanvasToImage(canvas);
这可能会有所帮助。
function demoFromHTML() {
html2canvas(document.getElementById("talltweets"), {
onrendered: function(canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
}
});
}
如果您可以尝试避免使用 dataURL 并改用 blob - 它将为您节省更多内存并且 load images faster
$canvas.toBlob(function(blob){
var url = URL.createObjectURL(blob)
var img = new Image
img.onload = function() {
URL.revokeObjecURL(this.src)
}
img.src = url
console.log(blob)
console.log(url)
})
<canvas id="$canvas">
您可以使用 polyfill 来支持 canvas#toBlob