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 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php 魔术方法详解
2014/11/11 PHP
php实现对象克隆的方法
2015/06/20 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python打开网页和暂停实例
2014/09/30 Python
linux下python抓屏实现方法
2015/05/22 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
中学生运动会广播稿
2015/08/19 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技