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 相关文章推荐
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
vue按需加载实例详解
Sep 06 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 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获取网页标题的3种实现方法代码实例
2014/04/11 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
PHP创建XML接口示例
2019/07/04 PHP
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python实现识别手写数字大纲
2018/01/29 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
自荐信格式
2013/12/01 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Python中的套接字编程是什么?
2021/06/21 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js