function convertImgToBase64(url, callback, outputFormat){

        var canvas = document.createElement('CANVAS');

        var ctx = canvas.getContext('2d');

        var img = new Image;

        img.crossOrigin = 'Anonymous';

        img.onload = function(){

          var width = img.width;

          var height = img.height;

          // 按比例压缩4倍

          var rate = (width<height ? width/height : height/width)/4;

          canvas.width = width*rate;

          canvas.height = height*rate;

          ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);

          var dataURL = canvas.toDataURL(outputFormat || 'image/png');

          callback.call(this, dataURL);

          canvas = null;

        };

        img.src = url;

      }

convertImgToBase64("http://img3.imgtn.bdimg.com/it/u=4271053251,2424464488&fm=21&gp=0.jpg", function(base64Img){

              // base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)

              console.log(base64Img);

              // base64转图片不需要base64的前缀data:image/jpg;base64

            }

)

转本地 图片 base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简单的html5 File测试 for pic2base64 本地图片</title>

<style>

</style>

<script>

window.onload = function(){

    var input = document.getElementById("demo_input");

    var result= document.getElementById("result");

    var img_area = document.getElementById("img_area");

    if ( typeof(FileReader) === 'undefined' ){

            result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";

            input.setAttribute( 'disabled','disabled' );

    } else {

            input.addEventListener( 'change',readFile,false );}

}

function readFile(){

        var file = this.files[0];

//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

        if(!/image\/\w+/.test(file.type)){

                alert("请确保文件为图像类型");

                return false;

        }

        var reader = new FileReader();

        reader.readAsDataURL(file); //转化为base64位

        reader.onload = function(e){

                result.innerHTML = '<img src="'+this.result+'" alt=""/>';

                img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';

        }

}

</script>

</head>

<body>

<input type="file" value="sdgsdg" id="demo_input" />

<textarea id="result" rows=30 cols=300></textarea>

<p id="img_area"></p>

</body>

</html>

图片转base64的更多相关文章

  1. .net C# 图片转Base64 Base64转图片

    //图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...

  2. html5 图片转为base64格式异步上传

    因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...

  3. 本地与在线图片转Base64及图片预览

    查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...

  4. 将图片转换为base64 格式

    1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...

  5. 图片的 base64 编码

    图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...

  6. Base64编码 图片与base64编码互转

    package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import jav ...

  7. 图片转换base64数据上传，并且实现预览的简便方法

    对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...

  8. js 图片转换为base64

    <input id="file" type="file"> <img id="img" style="max-h ...

  9. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

  10. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

随机推荐

  1. [AHOI 2009] 维护序列（线段树模板题）

    1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec  Memory Limit: 64 MB Description 老师交给小可可一个维护数列的任务,现在小 ...

  2. bzoj1188 [HNOI2007]分裂游戏 博弈论 sg函数的应用

    1188: [HNOI2007]分裂游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 973  Solved: 599[Submit][Status ...

  3. Git简易教程

    概述 在说明什么是git之前,我们需要对版本控制(Version Control)做一个基本的概述,一般情况下,我们的源代码都是在时间和空间两个维度上进行管理并维护的,代码本身以及组织代码的项目文件( ...

  4. qsort C++ VS2013 leetcode

    class Solution { private: static int compare(const void * a, const void * b) { return (*(int*)a - *( ...

  5. [BZOJ 3637]Query on a tree VI

    偶然看见了这题,觉得自己 QTREE.COT 什么的都没有刷过的真是弱爆了…… 一道思路很巧妙的题,终于是在约大爷的耐心教导下会了,真是太感谢约大爷了. 这题显然是树链剖分,但是链上维护的东西很恶心. ...

  6. ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  7. VS2010 中 Entity Framework 多数据库并存方法

    选中相应数据库生成的 *.edmx文件,然后在属性中找到“自定义工具命名空间”,为每个EF数据集设置不同的命名空间,这样每个数据库生成的代码就会被隔离在不同的命名空间,即使同名类型也就不会相互影响了.

  8. Sql server 2008 R2 实现远程异地备份

    1. 环境: a)两台同样的Sql Server 2008 R2 服务器 b)操作系统都是windows 2008 c)需要将102.108.0.1数据库MSGC远程备份到112.118.0.2的服务 ...

  9. nodeJS---express4+passport实现用户注册登录验证

    网上有很多关于passport模块使用方法的介绍,不过基本上都是基于express3的,本文介绍在express4框架中使用passport模块. 前言 passport是一个功能单一,但非常强大的一 ...

  10. oracle中Update方法

    1.两表(多表)关联update -- 被修改值由另一个表运算而来 update customers a set city_name=(select b.city_name from tmp_cust ...