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中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
vue-cli4.5.x快速搭建项目
May 30 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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
快餐公司创业计划书
2014/04/29 职场文书
还款承诺书范本
2015/01/20 职场文书
确保工程质量承诺书
2015/04/29 职场文书
导游词之无锡梅园
2019/11/28 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript