通过JavaScript显示本地图像（移动摄像头）

这是我的代码，用于显示来自用户本地计算机的图像，但有时它第一次不起作用。特别是在手机上，用户可以通过相机拍照。 用户第一次选择自己的图像时，它几乎总是不起作用。 我使用Image来获得aspectRatio的宽度和高度

上传图像 * { 填充：0； 保证金：0； } 身体{ 身高：100%； 显示器：flex； 证明内容：中心； 对齐项目：居中； } .选择img{ 宽度：450px； 高度：250px； 边界半径：10px； 光标：指针； 边框：3倍灰色虚线； 显示器：flex； 证明内容：中心； 对齐项目：居中； 字体系列：无衬线； 字体大小：25px； } 形象{ 显示：无； } 选择图像

---

通过桌面上的FireFox和Android上的Chrome进行了初步测试。两者都能正常工作以显示图像：

工作示例：-对于移动测试，使用：

JavaScript

少量切换到代码以更好地使用jQuery。这在从相机捕获照片和从移动设备上的文档选择照片两方面都起作用

调整大小失败了，对我来说这是意料之中的。添加触摸冲压：

新测试：

流动电话：

---

现在.resizeable也可以在手机上使用。

控制台中有警报吗？您在手机上测试哪些浏览器？@Twisty控制台中没有警报。我使用的是Chrome浏览器，但其他浏览器都不工作！初始测试，加上发现一些需要优化的代码：-对于移动测试，使用：当我从前摄像头自拍时，它在移动设备上不工作@穆罕默德一世无法复制这个问题。请描述复制问题的确切细节，包括您用于测试的手机和浏览器。我使用的是Galaxy S8+和Chrome 62.0.3202.84；但我的客户都有同样的问题！我使用三星Galaxy S8+和Chrome进行了测试，前向摄像头没有问题。请描述我如何复制该问题。

$(function() {
  function upload(file) {
    var fr = new FileReader();

    fr.onload = function(event) {
      var src = event.target.result;
      var img = new Image();

      img.onload = function() {
        $('.select-img').remove();
        $('#image').css('display', 'block').attr('src', src).resizable({
          aspectRatio: this.width / this.height
        });
      };
      img.src = src;
    };

    fr.readAsDataURL(file);
  }

  $('.select-img').click(function() {
    var fileInput = $("<input>", {
      type: "file",
      accept: "image/*"
    });
    fileInput.trigger('click');

    fileInput.on('change', function(ev) {
      upload(ev.target.files[0]);
    });

    return false;
  });
});