欢迎各位兄弟 发布技术文章

这里的技术是共享的

请问 上传图片 直接显示在页面上(不通过服务器)可以吗 不经过 ajax

<input type="file" id="img">

<script>
    var img = document.getElementById('img'),
        blob = URL.createObjectURL(img.files[0]),
        newImg = new Image();
    newImg.onload = drawCanvasImage;
    newImg.src = img;
    document.body.appendChild(newImg);
</script> 


 也可以借助html5的canvas 截取一部分去显示 





 史文仲远(958186957)  10:29:40
请问 上传图片 直接显示在页面上(不通过服务器)可以吗 
广州-岁月无声(570423538)  10:33:20
可以
史文仲远(958186957)  10:33:57
请问思路
广州-岁月无声(570423538)  10:35:11
监听file input的onchange事件,可以拿到图片文件
然后new Image 将src设成图片的image url
具体要搜索引擎查一下
不过不支持旧版ie
史文仲远(958186957)  10:41:26
@广州-岁月无声 关键问题 就是 image url 拿不到
(只有上传到服务器 才可以拿到 在本地拿不到)
广州-岁月无声(570423538)  10:43:12
有objecturl


 转成base64字符串。然后直接放进img标签的src里
就可以显示了 

 

选择了图片之后用FileReader读出来,然后转成base64,然后<img src="转出来的base64">
 


史文仲远(958186957)  10:29:40
请问 上传图片 直接显示在页面上(不通过服务器)可以吗 
广州-岁月无声(570423538)  10:33:20
可以
史文仲远(958186957)  10:33:57
请问思路
广州-岁月无声(570423538)  10:35:11
监听file input的onchange事件,可以拿到图片文件
然后new Image 将src设成图片的image url
具体要搜索引擎查一下
不过不支持旧版ie
史文仲远(958186957)  10:41:26
@广州-岁月无声 关键问题 就是 image url 拿不到
(只有上传到服务器 才可以拿到 在本地拿不到)
广州-岁月无声(570423538)  10:43:12
有objecturl
史文仲远(958186957)  10:44:46
objecturl  没用过



使用HTML5将图片转为base64编码格式

原创文章,转载请注明出处blogyang.com。谢谢!
 

方法一:

使用HTML5 File API完成。
此方法需使用file控件,当加载完选中的图片后,调用readAsDataURL即可将图片转为base64编码格式。例子:

效果图:

convert_to_base64_use_files

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片转base64编码功能</title>
    <style>
    #base64 {
        font-size: 12px;
        word-break: break-all;
    }
    </style>
</head>
<body>
    <input type="file" onchange="getFile(this)" />
    <img id="preview" alt="预览图片" width="200px;" />
    <p id="base64"></p>
</body>
</html>

JavaScrip代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 读取图片数据
function getFile(source) {
    if(window.FileReader) {
        var oFileReader = new FileReader(),
            oFile = source.files[0],
            oBase64 = document.getElementById("base64"),
            oPreview = document.getElementById("preview");
        // 过滤非图片文件
        if(/^image*/.test(oFile.type)) {
            oFileReader.onloadend = function(e) {
                oBase64.innerHTML = e.target.result;
                oPreview.src = e.target.result;
            };
            // 将图片转为base64格式
            oFileReader.readAsDataURL(oFile);
        }
        oBase64.innerHTML = "请选择图片文件!";
        oPreview.src = "";
    else {
        oBase64.innerHTML = "您当前使用的浏览器不支持读取文件功能";
    }
}

 

 


方法二:

使用canvas画布完成。
将图片加载如画布当中,使用HTML5自带的方法toDataURL,将画布内容转为base64编码格式。

效果图:

convert_to_base64_use_toDataURL

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片转base64编码功能</title>
    <style>
    #base64 {
        font-size: 12px;
        word-break: break-all;
    }
    </style>
</head>
<body>
    <canvas id="canvas">你使用的浏览器不支持H5~~</canvas>
    <p id="base64"></p>
</body>
</html>


JavaScript代码:
 

1
2
3
4
5
6
7
8
9
10
11
var oCanvas = document.getElementById("canvas"),
        oCtx = oCanvas.getContext("2d"),
        oImg = new Image();
        
    oImg.src = "img/base64.jpg";
    oImg.onload = function() {
        oCanvas.width  = oImg.width;
        oCanvas.height = oImg.height;
        oCtx.drawImage(oImg, 0, 0);
        document.getElementById("base64").innerHTML = oCanvas.toDataURL("image/jpeg"); //注意调用toDataURL方法需添加"image/jpeg",否则转出的编码会有差异
    };

 

 

请注意,第二个方法在FireFox浏览没有问题,但在Chrome和safari中会出现以下错误:

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.

 

错误原因是跨域资源分享策略不允许跨域使用图片导致。在被请求图片所属的服务器中,开启权限即可。(具体可了解下CORS跨域问题解决方案):

 

 

 

Apache服务器配置http.conf文件:

1、Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。

2、在文件中的<Directory>、 <Location>、<Files>或<VirtualHost>的配置里添加以下内容:

1
Header Access-Control-Allow-Origin *

3、重启服务器即可。

PS:

  • OSX下XAMP中的http.conf文件,路径为:/Applications/XAMPP/etc/httpd.conf
  • “ * ” 表示对所有者开放,会出现安全性问题,建议只针对指定域名进行开放权限,格式如:“Header Access-Control-Allow-Origin www.baidu.com

如图,在<directory>中添加语句:

apache_cors_origin

 

如此下来,问题就已经解决了。不过也产生了新的问题;在首次请求时图片资源是从服务器上加载,返回的响应头中会包含“Header Access-Control-Allow-Origin *”,告诉浏览器此资源允许跨域使用,程序执行没问题。

 

下面的实例是配置了虚拟主机以实现跨域效果,是“www.website.com/base64_blog.html”页面中,使用H5 Canvas方法转换一张“ www.h5.com/img/base64.jpg”图片格式为base64格式,如图:

convert_to_base64_first_success

 

 

图片缓存至浏览器后,页面加载的是缓存中的图片,浏览器仅向服务器请求询问是否是最新的文件。此时响应头中不再返回“Header Access-Control-Allow-Origin *”,浏览器认为页面不具有跨域资源请求的权限,故而又会报错:

 

错误提示如下:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

 

暂时想到的解决方法就是,对请求的图片路径末尾加随机数,以让浏览器识别为新的请求,如:

var path = "www.h5.com/img/base64.jpg?v=" + Math.random();

不过感觉依旧不妥,希望有更好的方法的孩纸告诉我下,Thx~

 

另外要做测试的孩纸,可以自己配置虚拟主机,实现跨域的效果。OSX XAMP配置虚拟主机教程:

Mac OSX配置XAMP虚拟主机 多站点

来自  http://blogyang.com/archives/483
唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码