Question

这是我用于显示来自用户本地计算机的图像的代码，但有时它第一次不起作用。特别是当（在移动设备上）用户从相机拍照时。

用户首次选择图像时，几乎总是不起作用。
我使用Image()来获取aspectRatio resizable的图片的宽度和高度。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Image</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .select-img {
            width: 450px;
            height: 250px;
            border-radius: 10px;
            cursor: pointer;
            border: 3px dashed gray;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: sans-serif;
            font-size: 25px;
        }

        #image {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    
    <div class="select-img">
        <p>Select Image</p>
    </div>

    <img id="image">

    <script>
        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 = $(document.createElement("input"));
            fileInput.attr('type', 'file');
            fileInput.attr('accept', 'image/*');
            fileInput.trigger('click');

            $(fileInput).on('change', function (ev) {
                upload(ev.target.files[0]);
            });

            return false;
        });
    </script>
</body>
</html>

Answer 1

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

工作示例：https://jsfiddle.net/Twisty/188x0w0u - 对于移动测试，请使用：https://jsfiddle.net/Twisty/188x0w0u/show

<强>的JavaScript

MySql.Data.MySqlClient.MySqlCommand myCommand = new MySql.Data.MySqlClient.MySqlCommand(insertQuery, connection);

轻微切换到代码以更好地使用jQuery。这既可以从相机中捕捉照片，也可以从移动设备上的文档中选择照片。

调整大小失败了，对我来说这是预期的。添加触控打孔：

https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js

新测试：https://jsfiddle.net/Twisty/188x0w0u/2/

移动：https://jsfiddle.net/Twisty/188x0w0u/2/show/

现在$(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; }); });也适用于移动设备。

通过JavaScript显示本地图像（移动相机）

1 个答案: