在网站内使用平板电脑摄像头

时间:2015-04-10 15:52:05

标签: javascript android ios html5 canvas

我正在尝试建立平板电脑网站。 在这个应用程序中,我想使用平板电脑中的相机。 几个小时后,我终于开始工作了。所以现在可以按下按钮,相机就会启动。之后,图像将被写入html5画布。

我现在遇到的问题是我想重复这个过程4次。所以必须有4个上传按钮和4个画布。每次上传都应该在自己的画布上进行。并保存在本地存储中。我一直在努力尝试多种尝试,但我无法理解。

问题应该在这两个功能中

    function readURL(input) {
        var canvas = document.getElementById('maincanvas');
        var context = canvas.getContext('2d');
        var imageObj = new Image();

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {
                imageObj.src = e.target.result;



                var newWidth = imageObj.width * 0.5;
                var newHeight = imageObj.height * 0.5;

                canvas.width = newWidth;
                canvas.height = newHeight;

                context.drawImage(imageObj, 0, 0, newWidth, newHeight);

                var data = canvas.toDataURL("image/jpeg", 1.0);

                localStorage.setItem("image", data);

                document.getElementById('preview').src = data;

            }

            reader.readAsDataURL(input.files[0]);
        }

    }

    $("#uploader").change(function(){
        readURL(this);
    });

这是小提琴:http://jsfiddle.net/bagmaendene/8Locnjp2/

如果soembody可以帮助我做到这一点真的很棒。

提前致谢

0 个答案:

没有答案