gpt4 book ai didi

javascript - 使用 JQuery 浏览按钮

转载 作者:行者123 更新时间:2023-11-28 07:34:36 26 4
gpt4 key购买 nike

我想使用浏览按钮在 Canvas 中添加图像。我尝试做某事,我可以使用浏览按钮,但无法在 Canvas 中添加图像。我该怎么办?

<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" />

最佳答案

类似这样的吗?

<!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>

关于javascript - 使用 JQuery 浏览按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28749033/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com