使用 JQuery 浏览按钮答案

【问题标题】：Browse Button with JQuery使用 JQuery 浏览按钮
【发布时间】：2015-02-26 17:34:16
【问题描述】：

我想使用浏览按钮在画布中添加图像。我尝试做某事，我可以使用浏览按钮但不能在画布中添加图像。我该怎么办？

<div style="float:left;"><canvas id="c" width="800" height="800"></canvas></div>
<p onclick="jQuery('#file').trigger('click');">Select a file</p>
<input type="file" id="file" name="file" />

【问题讨论】：

您是否有任何 javascript 可以将图像添加到您的画布元素？
文件的输入类型有很多安全限制。 JavaScript 将无法访问您输入的任何值。

标签： javascript jquery button canvas

【解决方案1】：

这样的？

<!DOCTYPE html>
<html>

<head>

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>

</head>

<body>

<script>
$(function() {
    $('#file-input').change(function(e) {
        var file = e.target.files[0],
            imageType = /image.*/;

        if (!file.type.match(imageType))
            return;

        var reader = new FileReader();
        reader.onload = loadFile;
        reader.readAsDataURL(file);

    });

    function loadFile(e) {
        var $img = $('<img>', { src: e.target.result });
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');

        $img.load(function() {
            context.drawImage(this, 0, 0);
        });
    }
});
</script>
<div style="float:bottom"><input type="file" id="file-input"><div>
<div style="float:left">
<canvas id="canvas" width="800px" height="800px"></canvas>
</div>


</body>
</html>

【讨论】：

谢谢，我可以上传图片，但如何才能将图片放入画布中？
这就是它的作用。当您上传图像时，图像会显示在画布中。我做了一个 JSFiddle 你可以看看：jsfiddle.net/n6end8v5