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 转载: ...
随机推荐
- A1027. Colors in Mars
People in Mars represent the colors in their computers in a similar way as the Earth people. That is ...
- JDBC详解(二)
一:Statement与PreparedStatement的注意点 存在sql注入的危险,如果用户传入的id为“2 or 1=1”,将删除表中的所有数据.而PreparedStatement有效的防止 ...
- 2018acm-icpc江苏邀请赛后记
这场比赛可真难. 不得不说矿大的环境大大出乎了我的意料,无论是校园面积还是基础设施都很好,唯一美中不足的大概是吃了一顿晚饭每个菜都有辣,幸好饭票发的很多,一个人四张饭票,一张饭票可以换3根香蕉,于是我 ...
- div无法触发blur事件解决办法
默认情况下div无法获取焦点,无法触发focus与blur事件,猜测span,a等标签也无法触发焦点事件(input:button,及button标签可以触发) 如何使div触发blur事件:可以给d ...
- 获取天气预报API5_统计最容易生病时间段
sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...
- Linux下环境变量设置技巧
Linux下环境变量设置技巧,不用/etc/profile而是在/etc/profile.d目录下新建特定的shell文件来设置 区别: 1.两个文件都是设置环境变量文件的,/etc/profile是 ...
- Linux命令之tar
tar命令 用处:打包,压缩,解压 一.打包 用发:tar + -cvf + 被打包的文件名或者文件夹名 (参数C的意思是打包,参数V的意思是打包时显示信息,参数f的意思是打包后文件的后缀名) 示例 ...
- Linux命令之man
man命令 用处:就是一个文档帮助手册 用法:在终端中输入man加上你想知道的命令,按Q退出man命令 示例: (我想知道pwd的用法) (我想知道ls命令的用法)
- idea中的常用快捷键
idea中常用的快捷键以及一些奇淫技巧 , 加快我们的开发效率 !!! 知道类名查找你本地以的类 (你pom中依赖的类+你自己创建的类)-------------> ctrl+shi ...
- RocketMQ在windows环境下的安装
原博地址:https://www.jianshu.com/p/4a275e779afa 一.预备环境 1.系统 Windows 2. 环境 JDK1.8.Maven.Git 二. RocketMQ部署 ...