Question

当我点击＆＃34;拍照＆＃34;时，我只是得到一个黑屏。我已经尝试了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);
            }
}

使用html 5和js拍照

1 个答案: