Question

我能够通过画布html控件上传图像，但问题是当我第一次上传图像时，该图像不是在画布html中上传而且如果我选择相同的图像那么该图像是在画布上很好地上传。这意味着，在我的场景中，如果用户首先在画布上上传图像，那么他们应该上传图像两次，但是当用户第一次上传图像时我想要的是那个图像应该显示在画布上。请检查下面的脚本和html5标签是否我做错了请建议我如何解决这类问题。提前谢谢。

<!--HTML5 tags Implementation-->

    <input type="file" id="imageLoader" name="imageLoader" onchange="readURL(this);"/>
     <canvas id="imageCanvas"></canvas>

<!--JavaScript Implementation-->
    <script type="text/javascript">
        var imageLoader = '';
        var canvas = '';
        var ctx = '';

        function readURL(input) {
            //alert('test');
            imageLoader = document.getElementById('imageLoader');
            //imageLoader.addEventListener('change', handleImage,false);
            imageLoader.addEventListener('change', this.handleImage.bind(this), false);
            canvas = document.getElementById('imageCanvas');
            ctx = canvas.getContext('2d');

        };

        function handleImage(e) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var img = new Image();
                console.log(img);
                img.onload = function () {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                }
                img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        };
    </script>

Answer 1

我找到了关于这个问题的解决方案。实际上，我正在实现javascript并且调用change事件是两次，当用户第一次在画布上上传图像时会产生问题。所以，我熟悉jquery所以我正在实施jquery并解决这个问题，请仔细检查下面的代码然后你会理解。

    <input type="file" id="imageLoader" name="imageLoader" />
    <canvas id="imageCanvas"></canvas>

<!--JQuery Implementation-->

<script type="text/javascript>

$(document).ready(function () {
$('#imageLoader').on('change', function (e) {
            imageLoader = document.getElementById('imageLoader');
            canvas = document.getElementById('imageCanvas');
            ctx = canvas.getContext('2d');
            handleImage(e);

        })
});
 function handleImage(e) {
        alert('check');
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            //console.log(img);
            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    };
</script>

在画布上上传图像时需要单个操作

1 个答案: