使用html 5拍攝圖片和js

Question

當我點擊「拍照」時，我只是得到一個黑屏。我一直在嘗試3個小時來解決這個問題，但我已經陷入了死衚衕。我可以選擇平板電腦上的圖片，但我無法拍攝新照片。我的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無法拍照。我提前

Answer 1

絕望

感謝您可以使用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); 
      } 
}