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. hdu1260 dp

    题意:有 k 个人需要买电影票,a[i] 表示第 i 个人单独买票要花费的时间,b[i] 表示第 i-1 个和第 i 个人一起买票需要花费的时间,问卖给所有人各一张票最少需要到什么时候. dp[i]表 ...

  2. OkHttp和Volley对比

    OkHttp 物理质量 使用OkHttp需要 okio.jar (80k), okhttp.jar(330k)这2个jar包,总大小差不多400k,加上自己的封装,差不多得410k. 功能介绍 Squ ...

  3. iOS_地图之显示附近微博

          1.首先需要新建一个MKMapView地图对象,在storyBoard中拖拽一个,在工程中导入MapKit.framework: 2.遵守MKMapViewDelegate协议,设定显示地 ...

  4. linux一些常用配置

    1.vi编辑退出不清屏 .bashrc最后加: 2.

  5. Beta版本冲刺——day6

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 站立式会议 今日计划表 人员 工作 ...

  6. TIOBE Index for January 2016（转载）

    Java has won the TIOBE Index programming language award of the year. This is because Java has the la ...

  7. C语言中，定义的含义？声明的含义？它们之间的区别是什么？

    在C语言中,对于定义和声明,也许我们非常的熟悉,但不一定真正的了解! 定义的含义:所谓定义,就是创建(编译器)一个对象,为这个对象分配一块内存空间并取名,也就是我们平常所说的变量名或对象名,一旦这个名 ...

  8. 扫描二维码自动识别手机系统（Android/IOS）

    移动互联网发展迅速,各种APP的开发都会推出多个版本(多终端),比如:iPhone版.iPad版.Android版.有些APP还会考虑覆盖到多个国家(国际化),比如:中文版.英文版.日文版.韩文版等. ...

  9. HDU 1394 Minimum Inversion Number(最小逆序数 线段树)

    Minimum Inversion Number [题目链接]Minimum Inversion Number [题目类型]最小逆序数 线段树 &题意: 求一个数列经过n次变换得到的数列其中的 ...

  10. SQL调优常用方法

    在使用DBMS时经常对系统的性能有非常高的要求:不能占用过多的系统内存和 CPU资源.要尽可能快的完成的数据库操作.要有尽可能高的系统吞吐量.如果系统开发出来不能满足要求的所有性能指标,则必须对系统进 ...