我知道这只是通过插入来实现
<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/ 摆弄 CSS
我现在正在寻找一种方法,在捕获图像后将其存储在本地存储中,这样当用户离开页面并返回时,图像也会返回。但这是一个不同的问题!
关于javascript - 实际引用和使用用 HTML5 捕获的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29229279/