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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
js opener的使用详解
Jan 11 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
基于JavaScript实现随机点名器
Feb 25 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
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python入门之井字棋小游戏
2020/03/05 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
信息技术教学反思
2014/02/12 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
高中学生自我评价范文
2014/09/23 职场文书
停电调休通知
2015/04/16 职场文书
社会实践活动总结格式
2015/05/11 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python