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. 文件操作 模式r+与w+

    r+与w+ r+是读写模式,在文件的末尾进行追加操作. >>> myfile=open('pwd.txt', ... 'r+') >>> myfile.read() ...

  2. Codeforces Round #341 Div.2 D. Rat Kwesh and Cheese

    嗯本来想着直接算出来不就行了吗 然后我想到了200^200^200....... 好吧其实也不难取两次log就行了 然后我第一次写出来log就写残了........... log里面的拆分要仔细啊.. ...

  3. VS2008基于对话框的MFC上位机串口通信（C++实现）简单例程

    首先,在 vs2008 环境下创建 MFC 运用程序 设置项目名称为 ComTest(这个地方随意命名,根据个人习惯),点击确定后,点击下一步 出现如下界面 选择"基于对话框"模式 ...

  4. 为什么C#中ref和out 关键字 ?

    需求假设:现需要通过一个叫Swap的方法交换a,b两个变量的值.交换前a=1,b=2,断言:交换后a=2,b=1. 现编码如下: class Program   {       static void ...

  5. [转] Linux下 config/configure/Configure、make 、make test/make check、sudo make install 的作用

    转自:http://blog.csdn.net/secondjanuary/article/details/8985795 这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装 ...

  6. [Spring] - Quartz定时任务 - Annotation

    Spring + Quartz可以使用annoation方式: 1.AppJob类: package com.my.quartz.testquartz1; import org.springframe ...

  7. switch

    关于java中switch使用的一些说明 switch(表达式) { case常量表达式1:语句1; .... case常量表达式2:语句2; default:语句; } default就是如果没有符 ...

  8. Displaying Bitmaps Efficiently 显示图片相关

    http://developer.android.com/training/displaying-bitmaps/index.html .手机内存资源有限 .Bitmap占用的内存大 .App有时需要 ...

  9. mysql5.5字符集设置的一点变化（对于中文乱码问题，需要设置mysql字符集）

    工作中因为字符集问题没少头疼,还犯过一次错误,还好拯救及时,没有发生重大事故,唉,弄清楚点还是非常有必要的: 例如我的工作环境为CTR+redhat5+mysql5.5 在导入sql语句的时候必须要注 ...

  10. 如何将Debug文件夹下的资源打包成一个EXE文件直接执行

    前言:前段时间写了个小程序,想分享给好友看看,可所以资源都放在Debug文件夹下,整个文件夹发给人家这也太……,为了显得稍微专业一点,想把它们打包一个EXE文件执行,因为我见到到这样的程序,直接一个E ...