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防止重复执行动画避免页面混乱
Apr 22 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
原生JS实现幻灯片
Feb 22 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python可变参数函数用法实例
2015/07/07 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python中while和for的区别总结
2019/06/28 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
《尊严》教学反思
2014/02/11 职场文书
说明书范文
2014/05/07 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
2015最新民情日记范文
2015/06/26 职场文书
nginx配置之并发频次限制
2022/04/18 Servers
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server