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 相关文章推荐
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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/07/30 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php通过session防url攻击方法
2014/12/10 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
原生js实现日历效果
2020/03/02 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
毕业生实习鉴定
2013/12/11 职场文书
学习党课思想汇报
2013/12/29 职场文书
建筑项目策划书
2014/01/13 职场文书
校园十大歌手策划书
2014/02/01 职场文书
李培根演讲稿
2014/05/22 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
保安辞职信范文
2015/02/28 职场文书
裁员通知
2015/04/25 职场文书
PHP实现两种排课方式
2021/06/26 PHP
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android