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学习基础知识小结
Nov 25 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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配置参数总结
2013/06/14 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php异常处理方法实例汇总
2015/06/24 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
微信支付开发发货通知实例
2016/07/12 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
python编写爬虫小程序
2015/05/14 Python
python中count函数简单的实例讲解
2020/02/06 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
开学季活动策划方案
2014/02/28 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
军训阅兵新闻稿
2015/07/17 职场文书