html5拍照功能
发布于 3个月前 作者 wuzeru 379 次浏览 来自 问答
<canvas style="display: none;"></canvas> <button id="capture">snapshot</button>
<script >
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var img = document.querySelector('img');
var ctx = canvas.getContext('2d');
var localMediaStream = null;



var snapshot = function () {
    alert('开始拍照');
    console.log(localMediaStream);
    if (localMediaStream) {
        alert('拍照了');
        ctx.drawImage(video, 0, 0);
        img.src = canvas.toDataURL('image/png');
        console.log(canvas.toDataURL('image/webp'));
        console.log(img.src);
    }
};

var sizeCanvas = function () {
    setTimeout(function () {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        img.width = video.videoWidth;
        img.height = video.videoHeight;
    }, 100);
};

var btnCapture = document.getElementById('capture');
btnCapture.addEventListener('click', snapshot, false);



navigator.mozGetUserMedia(
    {video: true},
    function (stream) {
        console.log(window.URL);
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
        sizeCanvas();
    },
    function () {
        alert('your browser does not support getUserMedia');
    }
);

</script>

各位大神好!这是从网上找来的代码,在ff里面运行之后,点击snapshot之后,img的url是“data ,”,能不能说明一下是什么原因?
另外,其实之前在ff里成功了,但是不知道为什么重启ff之后又失败了,小白求指教,希望各位大大勿喷。
2 回复

你的 sizeCanvas() 方法有问题,把 canvas 画布弄成 0x0 了,所以你拍的照片data 啥也没有

@lisposter 确实是这个原因,那我想问下,为什么videoHeight和videoWidth会是0,这两个属性指的是什么?麻烦你了。

回到顶部