krajee 使用屏幕截图添加图像答案

【问题标题】：krajee add image using screen capturekrajee 使用屏幕截图添加图像
【发布时间】：2020-05-20 17:13:44
【问题描述】：

我正在使用 krajee 文件输入将图像上传到服务器。我还希望能够使用屏幕截图添加文件。这个想法是，当我捕获图像时，它会出现在文件上传预览区域中。

我的html

<input th:field="*{documents}" class="file" id="input-res-capture" type="file" multiple>

<div class="col-md-4">
    <video id="videostream" autoplay></video>
    <p><button class="btn btn-primary capture-button">Start video</button>
    <p><button class="btn btn-primary" id="screenshot-button" disabled>Take screenshot</button></p>
    <p><button class="btn btn-primary" id="stop-button">Stop</button></p>
 </div>
 <div class="col-md-4">
    <img id="screenshot-img">
 </div>

我的 Krajee 文件上传插件代码

 $("#input-res-capture").fileinput({
    browseOnZoneClick: false,
    showUpload: false,
    showCancel: false,
    maxFileCount: 5,
    allowedFileExtensions: ['pdf', 'png', 'jpeg', 'jpg'],
    showPreview: true,
    removeLabel: 'Remove All',
    mainClass: "input-group-lg",
    theme: "fa",
    showBrowse: false,
    dropZoneTitle: 'Captured images will appear here',
    initialPreviewAsData: false,
    fileActionSettings: {
        showRemove: true,
        showUpload: false,
        showZoom: true,
        showDrag: false,
        showCancel: false,
    },
});

我的屏幕截图代码

const constraints = {
   video: true
};
const captureVideoButton = document.querySelector('#screenshot .capture-button');
const screenshotButton = document.querySelector('#screenshot-button');
const stopButton = document.querySelector('#stop-button');
const fileInput = document.querySelector('#input-res-capture');
const img = document.querySelector('#screenshot img');
const video = document.querySelector('#screenshot video');

const canvas = document.createElement('canvas');

captureVideoButton.onclick = function(event) {
   event.preventDefault()
   navigator.mediaDevices.getUserMedia(constraints).
      then(handleSuccess).catch(handleError);
};

screenshotButton.onclick = video.onclick = function(event) {
  event.preventDefault()
  canvas.width = 200;
  canvas.height = 300;

  canvas.getContext('2d').drawImage(video, 0, 0);
  img.src = canvas.toDataURL('image/webp');
}

非常感谢任何帮助

【问题讨论】：

标签： javascript html file input bootstrap-4

【解决方案1】：

您可以通过将图像设置为预览来添加图像。进行捕获后，重新创建在“initialPreview”参数中定义其 src 的文件输入。

$("#input-res-capture").fileinput('destroy').fileinput({
    browseOnZoneClick: false,
    showUpload: false,
    showCancel: false,
    maxFileCount: 5,
    allowedFileExtensions: ['pdf', 'png', 'jpeg', 'jpg'],
    showPreview: true,
    removeLabel: 'Remove All',
    mainClass: "input-group-lg",
    theme: "fa",
    showBrowse: false,
    dropZoneTitle: 'Captured images will appear here',
    initialPreview: image_uri,
    initialPreviewAsData: true,
    initialPreviewFileType: 'image',
    fileActionSettings: {
        showRemove: true,
        showUpload: false,
        showZoom: true,
        showDrag: false,
        showCancel: false,
    },
});

还有一个选项可以使用更新文件输入的参数

$("#input-res-capture").fileinput('refresh',{
                    initialPreview: image_uri,
                    initialPreviewAsData: true,
                    initialPreviewFileType: 'image',
}

但在我的情况下，“刷新”选项不起作用。

【讨论】：