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操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
js控制div弹出层实现方法
May 11 Javascript
jquery选择器简述
Aug 31 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
php实现简单四则运算器
2020/11/29 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
javascript数组组合成字符串的脚本
2021/01/06 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
基于js disabled="false"不起作用的解决办法
2013/06/26 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
js实现文字滚动效果
2016/03/03 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
浅析从vue源码看观察者模式
2018/01/29 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python 数据加密代码
2008/12/24 Python
python中的装饰器详解
2015/04/13 Python
python中assert用法实例分析
2015/04/30 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
社区艾滋病宣传活动总结
2015/05/07 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
virtualenv隔离Python环境的问题解析
2022/06/21 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript