javascript - 使用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

您可以使用 html2canvas jquery 来拍摄屏幕快照。

详情可以引用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);
            }
}