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 indexOf函数使用说明
Jul 03 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
vue 中filter的多种用法
Apr 26 Javascript
详解Vue的options
May 15 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
如何将数据从文本导入到mysql
2006/10/09 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
bootstrap table服务端实现分页效果
2017/08/10 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
wxpython布局的实现方法
2019/11/01 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
大学生职业生涯规划范文
2013/12/31 职场文书
2014庆六一活动方案
2014/03/02 职场文书
预备党员的自我评价
2014/03/12 职场文书
个人承诺书
2014/03/26 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
政风行风评议工作总结
2014/10/21 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis