实际上引用和使用HTML5捕获的图像

时间:2015-03-24 09:42:13

标签: javascript css html5 image

我意识到这只是通过插入

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

我遇到麻烦(由于我缺乏适当的编码技能)实际上是抓住并使用用户选择/拍摄的图像。

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

听起来很简单但是,一旦捕获,我就无法编写引用图像并操纵它所需的代码。

顺便说一句,这是针对内部项目的,因此权限等无关紧要。

提前致谢。

1 个答案:

答案 0 :(得分:0)

今天在网上提供一些帮助时,我想到了以下内容,我提出了以下工作方法,并且在初始图像加载后也会更改按钮的文字。

<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

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