@y3093 2015-08-03T04:16:07.000000Z 字数 2862 阅读 8351

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

方法一：

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

效果图：
使用HTML5 File转换图片格式效果图

HTML代码：

<!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代码：

// 读取图片数据
    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编码格式。

效果图：
使用画布转换图片格式效果图

HTML代码：

<!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代码：

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文件：

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

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

Header Access-Control-Allow-Origin *
3. 重启服务器即可。

PS：

OSX下XAMP中的http.conf文件，路径为：/Applications/XAMPP/etc/httpd.conf

“ * ” 表示对所有者开放，会出现安全性问题，建议只针对指定域名进行开放权限，格式如：“Header Access-Control-Allow-Origin www.baidu.com”

如图，在中添加语句：
配置httpd.conf

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

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

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

配置Apache后，图片缓存后执行失败效果图

错误提示如下：

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虚拟主机多站点

参考资料：

HTML5安全：CORS（跨域资源共享）简介

MarkDown下阅读此文章：https://www.zybuluo.com/y3093/note/139206

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

方法一：

方法二：

内容目录