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的alert样式如何更改如背景颜色
Jan 22 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
vant时间控件使用方法详解
Dec 24 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
UCenter 批量添加用户的php代码
2012/07/17 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
移动端js图片查看器
2016/11/17 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python flask实现分页效果
2017/06/27 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
幼师辞职信范文
2015/02/27 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
法律服务所工作总结
2015/08/10 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS