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. 怎样彻底清楚Chrome缓存数据

    如下图所示: 1.鼠标放在刷新那然后点击右键 2.点击Empty Cache and Hard Reload (注意:一定要在点击F12的模式下)

  2. Ret2Libc 练习（1） -- ZwSetInformationProcess

    花了两个小半晚上的时间将0day安全这本书的绕过DEP的第一个实验做了,这里做些笔记. Ret2libc 我现在自己的理解就是在开启DEP保护的情况下,在程序的其他的可执行位置找到可以满足我利用要求的 ...

  3. [IOS8兼容性]IOS8上收不到通知

    应用中用到了通知功能,同时有远程通知和本地通知. 测试报告应用在iphone6 plus上,收不到本地通知. 因为所有的第三方闹钟应用采用的都是本地通知方式,所以第一时间随机下载了5款不同的闹钟应用. ...

  4. oracle数据库从入门到精通之三

    综合案例ddl&dml有一个商品数据库1.数据表的创建    ddl先编写数据库脚本--删除数据表drop table purcase purge;drop table product pur ...

  5. ASP.NET的MVC项目BUG——“所需的防伪表单字段‘__RequestVerificationToken’不存在”

    问题:所需的防伪表单字段‘__RequestVerificationToken’不存在 解决办法: [ValidateAntiForgeryToken]能在[HttpPost]下用 [Validate ...

  6. div标签上下滚动

    <div id="myInfo" style={{width:'100%',height:'100%', overflow:'scroll'}}></div> ...

  7. office project 激活

    office project 2010激活方式: 图上中,箭头位置,可能没激活,需要软件激活 ( mini-KMS Activator(Office2010激活工具) V1.2 绿色版 ) 激活方式如 ...

  8. xcode中使用xib添加autolayout中constrain to margins的不同

    在使用xcode7 在storyboard中添加autolayout中发现 如果添加在view 直接添加到viewcontroller的view 上 constrain to margins    只 ...

  9. 微信开发-ACCESS TOKEN 过期失效解决方案

    微信开发-ACCESS TOKEN 过期失效解决方案 起因:因为access_token的重要性,开发过微信的都知道,但是他有自己的生命周期,官方解释为:"有效期为7200秒",一 ...

  10. ORM框架详解

    .Net开源微型ORM框架测评 什么是ORM? 对象关系映射(英语:Object Relation Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象 ...