方法一:canvas

 <script type="text/javascript">

     function getBase64Image(img) {

         var canvas = document.createElement("canvas");

         canvas.width = img.width;

         canvas.height = img.height;

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

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

         var dataURL = canvas.toDataURL("image/png");

         return dataURL

         // return dataURL.replace("data:image/png;base64,", "");

     }

     function main() {

         var img = document.createElement('img');

         img.src = './images/Game of Thrones.jpg';  //此处自己替换本地图片的地址

         img.onload =function() {

             var data = getBase64Image(img);

             var img1 = document.createElement('img');

             img1.src = data;

             document.body.appendChild(img1);

             console.log(data);

         }

     }

     main()

 </script>

方法二:FileReader

 <html>

 <head>

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

     <title>通过filereader接口读取文件</title>

     <script type="text/javascript">

         function readAsDataURL()

         {

             if(typeof FileReader=='undifined')          //判断浏览器是否支持filereader

             {

                 result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";

                 return false;

             }

             var file=document.getElementById("imagefile").files[0];

             if(!/image\/\w+/.test(file.type))           //判断获取的是否为图片文件

             {

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

                 return false;

             }

             var reader=new FileReader();

             reader.readAsDataURL(file);

             reader.onload=function(e)

             {

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

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

             }

         }

     </script>

 </head>

 <body>

 <p>

     <label>请选择一个文件：</label>

     <input type="file" id="imagefile" />

     <input type="button" value="读取图像" onClick="readAsDataURL();" />

 </p>

 <div name="result" id="result">

     <!-- 这里用来显示图片结果-->

 </div>

 </body>

 </html>

js img转换base64的更多相关文章

  1. js 图片转换base64 base64转换为file对象

    function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...

  2. [JavaScript] JS中对Base64的解析

    JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...

  3. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  4. C#、Java和JS实现SHA256+BASE64加密总结

    C#.Java和JS实现SHA256+BASE64加密总结 --莫非(www.muphy.me) 原理 首先,通过编码格式(UTF-8.ASCII等,如果含有汉字等字符,编码格式不同加密结果也不同)获 ...

  5. Base64图片编码原理，base64图片工具介绍，图片在线转换Base64

    Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少  ...

  6. http://imgbase64.duoshitong.com/ 图片转换 base64

    base64图片工具介绍: 1.支持 PNG.GIF.JPG.BMP.ICO 格式. 2.将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一 ...

  7. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  8. Js 日期转换函数(UTC时间转换及日期想加减)

    IOS上Js日期转换中new Date("yyyy-mm-dd")不能正常工作,必须使用new Date("yyyy/MM/dd"); 日期相加减: Date. ...

  9. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

随机推荐

  1. 第十届国际用户体验创新大赛携Mockplus走进校园

    今日立夏,万木并秀,生生不息,第十届国际用户体验创新大赛即将拉开序幕.5月5日下午,一场用户体验设计经验分享活动携带众多嘉宾降临成都理工大学,为西南赛区首站赛事宣讲. 本次宣讲活动邀请了华为技术有限公 ...

  2. ScrollView中嵌套ListView的问题

    网上关于怎样在ScrollView中嵌套ListView的讨论有很多,我大概是搜索了一下,简单总结如下: 1.不要在ScrollView中嵌套ListView a.用一个LinearLayout来代替 ...

  3. 3、Docker能干什么？

    简化配置   这是Docker公司宣传的Docker的主要使用场景.虚拟机的最大好处是能在你的硬件设施上运行各种配置不一样的平台(软件.系统),Docker在降低额外开销的情况下提供了同样的功能.它能 ...

  4. [label][JavaScript]读nowmagic - js词法作用域、调用对象与闭包

     原文链接:                 http://www.nowamagic.net/librarys/veda/detail/1305 作用域(scope) JavaScript 中的函数 ...

  5. 从数据池中捞取的存储过程控件使用完以后必须unprepare

    从数据池中捞取的存储过程控件使用完以后必须unprepare,否则会造成输入参数是仍是旧的BUG. 提示:动态创建的存储过程控件无此BUG.此BUG只限于从数据池中捞取的存储过程控件. functio ...

  6. GPS模块输出的NMEA数据ddmm.mmmm转换成dd.ddddd并在google Earth Pro中描点

      GPS模块输出的数据是NMEA格式,其中GPGGA字段包含我们需要的经纬度信息. 例:$GPGGA,092204.999,4250.5589,S,14718.5084,E,1,04,24.4,12 ...

  7. .NET框架源码解读之准备CLR源码阅读环境

    微软发布了CLR 2.0的源码,这个源码是可以直接在freebsd和windows环境下编译及运行的,请在微软shared source cli(http://www.microsoft.com/en ...

  8. 调用阿里云API 的demo示例（java/python）

    Java 示例 // 创建DefaultAcsClient实例并初始化 DefaultProfile profile = DefaultProfile.getProfile(vo.getAliRegi ...

  9. 「WC2006」水管局长

    题目链接 戳我 \(Solution\) 这道题实际上是维护一个最小生成树,因为正的搞不好搞,所以反着搞会比较好,现将没有没删掉的边留下来生成一颗最小生成树,再加边就好了,现在\(LCT\) 来看看怎 ...

  10. Python----一些面试题

    1.写出以下结果 print(1<2 and 2==2) print(1<2 and 2==1) print(1>2 and 2==2) 结果: True False False 解 ...