首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用javascript替换图像

用javascript替换图像
EN

Stack Overflow用户
提问于 2013-08-20 09:49:49
回答 4查看 505关注 0票数 2

我对网络上的编码非常陌生,我正在努力使一些东西发挥作用。

我试图用一个简单的功能制作一个小网页,用用户从自己的电脑中选择的图像替换页面上现有的图像。所有这些都是脱机完成的。但是我不知道怎么..。

我该怎么处理这个?

附注:对于脱机,我的意思是,我可以在本地完成这一点,而不需要上传到服务器或其他任何东西。我应该把这个小页面放在usb手柄上,这样就可以作为一个小工具使用。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-08-20 10:17:11

This (readAsDataURL)是你要找的东西。

参见工作示例here

在所附的示例中,您还可以发送所选图像的base64数据以供上载。

这里的主题是:大多数客户都在寻找一个移动网络应用程序,一个应用程序,从电话拍摄照片,并发送到服务器。在网络应用程序中并不完全可行。

票数 1
EN

Stack Overflow用户

发布于 2013-08-20 09:57:06

井。您需要实现文件上传功能。如果是的话,可以使用http://www.uploadify.com/,然后使用onUploadSuccess方法来更改图像。

你说离线的时候?你的意思是没有互联网连接,还是网页会像内联网一样存在于服务器上?

............Just补充我自己的答案.

好吧,所以你需要它放在USB上。为什么不在USB上安装一个独立的服务器,这样你就可以运行PHP了。

http://www.server2go-web.de/index.html

http://www.uwamp.com/en/

代码语言:javascript
复制
$("#file_upload").uploadify({
            height        : 30,
            width         : 120,
            swf           : 'include/fileuploader/uploadify.swf',
            uploader      : 'include/fileuploader/uploadify.php',
            'onUploadSuccess' : function(file, data, response) {
                console.log('The file was saved to: ' + data);
                $("#img-preview").html("<img src='"+data+"' />");

            }
});
票数 4
EN

Stack Overflow用户

发布于 2013-08-20 12:30:54

我想我应该展示一个代码示例,因为这是StackOverflow的思想。我希望它能说明这件事是如何运作的。

与其依赖一组插件和库,您将发现使用本机javascript可能更容易。您可以将jQuery添加到混合的事件处理中,等等,如果您愿意的话,它在web工具包中基本上是标准的。

HTML

首先,让我们为input和占位符img元素添加html。当然,您可以使用img或本机js动态添加jQuery文件。

代码语言:javascript
复制
<input id='ourfile' type='file' />

<!-- The image placeholder for our preview -->
<img id='preview' src='' />    

Javascript

代码语言:javascript
复制
// Lets cache our two elements of interest.
ourfile = document.getElementById('ourfile');
preview = document.getElementById('preview');

// Create an instance of the 'native' FileReader.
fr = new FileReader();

// When our input triggers change (i.e. image is selected) load the file using the file reader.
ourfile.onchange = function () {
    file = ourfile.files[0];
    fr.readAsDataURL(file);
}

// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image).
fr.onload = function(){
 preview.src = fr.result;   
}

详细信息

@Akki619的答案中的链接显示了检查图像有效性的详细信息,等等。

小提琴

下面是指向一个工作示例的链接:http://jsfiddle.net/rUvUX/4/

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18331995

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档