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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
vue v-model动态生成详解
Jun 30 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP中的CMS的涵义
2007/03/11 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
php数组遍历类与用法示例
2019/05/24 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
关于vue面试题汇总
2018/03/20 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
孝老爱亲模范事迹材料
2014/05/25 职场文书
校本教研活动总结
2014/07/01 职场文书
2014年财政工作总结
2014/12/10 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python