js 将图片连接转换称base64格式
我们把图像文件的内容直接写在了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格式的更多相关文章
- [转]js 将图片连接转换称base64格式
参考:http://blog.csdn.net/wyyfwm/article/details/45917255 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求 ...
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- js如何将选中图片文件转换成Base64字符串?
如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- C++读写图片数据转成Base64格式的一种方法
最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...
- 图片文件转换成Base64编码实现ajax提交图片
//上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...
- data:image/png;base64 上传图像将图片转换成base64格式
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
- javascript-文件File转换成base64格式
不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...
- C++读写图片数据转成Base64格式
转载:http://www.cnblogs.com/jeray/p/8746976.html 转载:https://www.cnblogs.com/lujin49/p/4957742.html 转载: ...
随机推荐
- hdu 1114Piggy-Bank(完全背包)
传送门 https://www.cnblogs.com/violet-acmer/p/9852294.html 参考资料: [1]:https://www.cnblogs.com/jbelial/ar ...
- echarts图表点击事件之跳转页面和加载页面
下图显示四个条形图,点击条形图就跳转到其页面,这说明您要判断你点了那个条形图. echarts给了它点击事件 写法,我们只要模仿就行,代码如下: //echarts图表点击跳转 myChart.on( ...
- 十三、java_GUI
目录: 一.AWT 二.组件和容器 三.布局管理器 四.事件处理 五.java图形 六.window事件 一.AWT AWT(Abstract Window Toolkit)包括了很多类和接口,用于J ...
- Makefile ------ := ?= += =的区别
Makefile 中:= ?= += =的区别 新建一个Makefile,内容为: ifdef DEFINE_VRE VRE = “Hello World!” endif ifeq ($(OPT),d ...
- java常用的运算符
Java 语言中常用的运算符可分为如下几种: Ø 算术运算符 Ø 赋值运算符 Ø 比较运算符 Ø 逻辑运算符 Ø 条件运算符
- eclipse中编辑properties文件无法看到中文
如果在eclipse中编辑properties文件无法看到中文则参考“Eclipse开发环境配置-indigo.docx”添加propedit插件.
- GO语言的进阶之路-Golang高级数据结构定义
GO语言的进阶之路-Golang高级数据结构定义 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们之前学习过Golang的基本数据类型,字符串和byte,以及rune也有所了解, ...
- C和C++的区别和联系
关于C和C++的区别是面试中经常会被问到的问题,本着即将面试的心态,进行知识整理,并对小知识点进行扩展: C/C++的联系: C++是C的超集,兼容大部分C的语法的结构: 联系嘛我只能想到这个,毕竟c ...
- CentOS6.x下yum安装MySQL5.5/5.6
1. 安装mysql-5.5的yum源 # rpm -ivh http://repo.mysql.com/yum/mysql-5.5-community/el/6/x86_64/mysql-commu ...
- LINQ to SQL 实现 GROUP BY、聚合、ORDER BY
Ø 前言 本示例主要实现 LINQ 查询,先分组,再聚合,最后在排序.示例很简单,但是使用 LINQ 却生成了不同的 SQL 实现. 1) 采用手动编写 SQL 实现 SELECT ROW_NU ...