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程序员应该知道的45个实用技巧
Mar 04 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
详解javascript中的事件处理
Nov 06 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 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 八种基本的数据类型小结
2011/06/01 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python爬虫基本知识
2018/03/05 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
运动员口号
2014/06/09 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
创先争优演讲稿
2014/09/15 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2014年居委会工作总结
2014/12/09 职场文书
入队仪式主持词
2015/07/04 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python