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. 微信收藏导出到PC端的方法，不要再傻傻的用网页版转换了！

    微信里面收藏了很多有意思的东西,想转到PC上保存起来,以防万一哪天链接失效了. 另外PC上面看,屏幕大一些,也爽一些. 以前的方法是需要通过网页版来传输一下,现在微信有了PC客户端,很方便,直接安装P ...

  2. IOS 关键字self,super，copy, retain, assign , readonly , readwrite, nonatomic、 @synthesize、@property、@dynamic

    IOS 关键字self,super,copy, retain, assign , readonly , readwrite, nonatomic.                     @synth ...

  3. 随机函数的代码（srand、rand）

    #include<stdio.h> int main() int counter; for(counter=0;counter<10;counter++) { srand(count ...

  4. k8s DNS 服务发现的一个坑

    按照官当文档,以及大家的实践进行k8s dns 服务发现搭建还是比较简单的,但是会有一个因为系统默认dns 配置造成的一个问题 1. linux  默认dns 配置在 /etc/resolv.conf ...

  5. Centos 6.5编译安装yum

    1.删除redhat原有的yum rpm -aq|grep yum|xargs rpm -e --nodeps 2.下载yum安装文件 wget http://mirrors.163.com/cent ...

  6. c#线程之异步委托begininvoke、invoke、AsyncWaitHandle.WaitOne 、异步回调

    单靠自己看书学总是会走很多弯路,任何人也不列外,有些时候自己遇到的很多问题,其它别人在很久之前也可能遇到过,上网查查可以走很大捷径,对自己的学习有很大帮助,刚开始弄线程这块,一开始只是看书,很多东西都 ...

  7. android安装busybox

    大家是否有过这样的经历,在命令行里输入adb shell,然后使用命令操作你的手机或模拟器,但是那些命令都是常见Linux命令的阉割缩水版,用起来很不爽.是否想过在Android上使用较完整的shel ...

  8. ruby HTTPS请求

    require 'uri'require 'net/http'require 'net/https' @toSend = { "date" => "2012-07- ...

  9. 黄聪：HtmlAgilityPack中SelectSingleNode的XPath和CSS选择器

    XPath和CSS选择器 原文:http://ejohn.org/blog/xpath-css-selectors 最近,我做了很多工作来实现一个同时支持XPath和CSS 3的解析器,令我惊讶的是: ...

  10. eclispe---快捷键设置

    1,eclipse自动补全的设置(自动提示) 2014-11-03 14:51:43 如果你用过Visual Studio的自动补全功能后,再来用eclipse的自动补全功能,相信大家会有些许失望. ...