使用html 5拍摄图片和js

当我点击“拍照”时，我只是得到一个黑屏。我一直在尝试3个小时来解决这个问题，但我已经陷入了死胡同。我可以选择平板电脑上的图片，但我无法拍摄新照片。我的JS代码如下所示：使用html 5拍摄图片和js

function hasSelectedPhoto() { 
var x = 0, y = 0, width = 150, height = 130; 

var takePicture= document.querySelector("#take-picture"), 
    showPicture= document.querySelector("#show-picture"); 

if (takePicture&& showPicture) { 
    takePicture.onchange = function (event) { 
     var files = event.target.files, file; 

     if (files && files.length > 0) { 
      file = files[0]; 

      var reader = new FileReader(); 

      reader.onload = function (e) { 
       var imageUrl = e.target.result, c = showPicture, context = c.getContext("2d"), 
       imageObject = new Image(); 
       imageObject.onload = function() { 
        context.clearRect(x, y, width, height); 
        context.drawImage(imageObject, x, y, width, height); 
       }; 
       imageObject.src = imageUrl; 
      }; 
      reader.readAsDataURL(file); 
     } 
    }; 
}

}

和HTML代码：

<div id="uploadedImageDiv" style="margin-left: 10px; width:300px; float: left;"> 
      @Html.LabelFor(m => m.NoteViewModel.ImageUpload) 
      @Html.TextBoxFor(m => m.NoteViewModel.ImageUpload, new { id="take-picture", type = "file", accept = "image/*" })     
      <input type="button" id="cancelPicture" value="Annuller billede" style="visibility: hidden;" /> 
      <button type="reset" id="resetUploadedImage" style="display: none"></button>   
     </div> 

     <canvas id="show-picture" style="display: none; border: medium solid #cccccc; margin-top: -50px;" width="150" height="125"> 
     </canvas>

我知道有一堆js代码，但我真的希望有人可能会看到一个错误我的代码，使得med无法拍照。我提前

来源

2015-03-03 user1960836

哪里是试图拍照的代码？那你提到的“拍照”按钮在哪里？ – 2015-03-03 10:40:46

我编辑了我的代码，因此您可以看到照片的拍摄地点。文本“拍照”是当我点击文本框拍摄图片时ipad变大的一个文本框 – user1960836 2015-03-03 11:30:45

然后看起来问题来自平板电脑，而不是浏览器。 – 2015-03-03 11:33:40

绝望

感谢您可以使用jQuery的html2canvas采取屏幕快照。

的细节，你可以参考link

只需下载html2canvas.js，并用它如下：

function takeSnapshot{ 
      var Obj = $("# id of you div or element"); 
      html2canvas($(Obj), { 
      onrendered: function (canvas) { 
        theCanvas = canvas; 
        document.body.appendChild(canvas); 
        var captureImage= canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, ""), 
        document.body.removeChild(canvas); 
      } 
}

来源

2015-03-03 11:37:43 Mahesh

我刚刚在手机上试了一下，在这里有效。是否需要在平板电脑上设置相机权限才能在网上使用相机？我试过寻找这个，但没有发现任何东西 – user1960836 2015-03-03 13:51:29

使用html 5拍摄图片和js

回答

相关问题