获取到上传的文件 myfile,创建一个 fileRead 文件对象,使用 readAsDataURL 方法可以将读取到的文件编码成 Data URL。文件加载成功后,e.target.result 就是文件图片所对应的 base64 编码。直接赋值给 img 的 src,就能显示图片。
- <body>
- <input type="file" name="myfile" id="myfile" value="" onchange="sub()"
- />
- </body>
- <script type="text/javascript">
- function sub() {
- var myfile = document.getElementById("myfile").files[0];
- var fileRead = new FileReader();
- fileRead.readAsDataURL(myfile);
- fileRead.onload = function(e) {
- console.log(e);
- var base64 = e.target.result;
- console.log(base64);
- var img = new Image();
- img.src = base64;
- document.getElementsByTagName("body")[0].appendChild(img);
- }
- } < script >
下面是 onload 里 e 对象打印的结果,可以看出 e.target.result 是文件图片的信息。
下面打印的是 base64 的编码,可以在 img 的 src 中直接引用,或者复制到浏览器搜索框里也能直接搜索图片。
运行结果图如下:
使用 canvas 画一个填充色为红色的矩形,试点按钮后,使用 canvas.toDataURL 方法:返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。把得到的 base64 编码赋给 img 的 src, 显示图片。
- <body>
- <canvas id="mycanvas" width="500" height="500"></canvas>
- <button onclick="sub()">点击</button>
- </body>
- <script type="text/javascript">
- var canvas = document.getElementById("mycanvas");
- var context = canvas.getContext("2d");
- context.beginPath();
- context.fillStyle = "red";
- context.fillRect(100,100,100,100);
- function sub(){
- var base64 = canvas.toDataURL();
- console.log(base64);
- var img = new Image();
- img.src = base64;
- document.getElementsByTagName("body")[0].appendChild(img);
- }
- </script>
结果图如下:
两种图片的 base64 的方法都很实用,项目开发中可能会遇到,今天来分享给大家。
来源: http://www.jianshu.com/p/5d76ec4c97e7