js 将图片连接转换成base64格式的简单实例


Posted in Javascript onAugust 10, 2016

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。现在我们提供一个js:

function convertImgToBase64(url, callback, outputFormat){
  var canvas = document.createElement('CANVAS'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL(outputFormat || 'image/png');
    callback.call(this, dataURL);
    canvas = null; 
  };
  img.src = url;
}


convertImgToBase64('http://bit.ly/18g0VNp', function(base64Img){
  // Base64DataURL
});

以上这篇js 将图片连接转换成base64格式的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 #Javascript
最棒的Angular2表格控件
Aug 10 #Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 #Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 #Javascript
基于js中的原型、继承的一些想法
Aug 10 #Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 #Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python写的服务监控程序实例
2015/01/31 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
深入理解Django中内置的用户认证
2017/10/06 Python
TensorFlow的权值更新方法
2018/06/14 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
办公室文秘自我评价
2013/09/21 职场文书
测试工程师岗位职责
2013/11/28 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
2014年母亲节寄语
2014/05/07 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2014年党务公开工作总结
2014/12/09 职场文书