实际参考和使用HTML5捕获的图像

Actually referencing and using the image captured with HTML5

本文关键字：图像 HTML5 参考      更新时间：2023-09-26

我知道这只是通过插入来实现的

<input type="file" id="photo" accept="image/*;capture=camera">

我遇到的问题（由于我缺乏适当的编码技能）实际上是抓取和使用用户选择/拍摄的图像。

具体来说，我希望iPad用户能够抓取一个图像，该图像将根据CSS在页面上呈现。一旦一个图像出现，我希望他们能够在需要的时候用另一个图像替换这个图像

听起来很简单，但一旦被捕获，我就无法编写引用图像并对其进行操作所需的代码

顺便说一句，这是一个内部项目，因此权限等都无关紧要。

提前谢谢。

今天，在网络上的一些帮助下，我想出了以下方法，它可以在加载初始图像后更改按钮的文本。

<div id="zeroDiv">
<input type="file" id="getPic" accept="image/*">
</div>
<div id="picWrapper">
    <img id="image">
<div id="buttDiv">
    <button id="picButt"><span class="buttText">Insert image</span>
    </button>
</div>
</div>

和JQuery/JavaScript:

$('#picButt').click(function () {
$('#getPic').trigger('click');
});
$(document).ready(function () {
$("#getPic").on("change", gotPic);
$("#image").load();
});
function gotPic(event) {
$("#image").attr("src", URL.createObjectURL(event.target.files[0]));
$("#picButt span").text("Change image");
}

在http://jsfiddle.net/1rg5Lyyk/4/

我现在正在寻找一种方法，在捕获图像后将其存储在本地存储中，这样当用户离开页面并返回时，图像也会返回。但这是一个不同的问题！

相关文章：