js canvas获取图片base64 dataUrl
function getImgBase64(path, callback) {
var img = new Image();
img.src = path;
//图片加载完成后触发
img.onload = function () {
var canvas = document.createElement("canvas");
//获取绘画上下文
ctx = canvas.getContext("2d");
// 获取图片宽高
var imgWidth = img.width;
var imgHeight = img.height;
//设置画布宽高与图片宽高相同
canvas.width = imgWidth;
canvas.height = imgHeight;
//绘制图片
ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
//图片展示的 data URI
var dataUrl = canvas.toDataURL('image/jpeg');
callback ? callback(dataUrl) : '';
};
}
getImgBase64('wood.png', function (dataUrl) {
console.log(dataUrl);
});
js canvas获取图片base64 dataUrl的更多相关文章
- 用FileReader对象获取图片base64代码并预览
MDN中FileReader的详细介绍: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 用FileReader获取图片base ...
- Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
- 小程序获取图片base64编码
项目中遇到了这个问题,在搜索过程中看到别人的博文,大多是下面这种方法,大致如下: let imgObj = { count: 1, success: (res) => { let tempFil ...
- FileReader 获取图片BASE64 代码 并预览
FileReader 获取图片的base64 代码 并预览 FileReader ,老实说我也不怎么熟悉.在这里只是记录使用方法. 方法名 参数 描述 abort none 中断读取 readAsBi ...
- js canvas压缩图片上传
$('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...
- 获取图片base64编码的几种方法
前文中我们聊了 Data URI 和 base64编码,稍微回顾下.base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,ba ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- [转]js动态获取图片长宽尺寸
http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...
- 转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)
转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...
随机推荐
- MinGW 编译 libaom 1.0.0 注意事项
CMake 后不生成 config/aom_version.h 文件 需要手动编写 #define VERSION_MAJOR 1 #define VERSION_MINOR 0 #define VE ...
- 仿stl+函数模板
#include<iostream> using namespace std; template<class T> void output(T begin, T end) { ...
- jupyter notebooks 中键盘快捷键
键盘快捷键——节省时间且更有生产力! 快捷方式是 Jupyter Notebooks 最大的优势之一.当你想运行任意代码块时,只需要按 Ctrl+Enter 就行了.Jupyter Notebooks ...
- C语言对字符串去重
# include <stdio.h> # include <string.h> char * getNewChar(char * str,char * newStr); in ...
- apache 配置反向代理 设置
1.下载 安装 下载地址:http://httpd.apache.org/download.cgi 将apache 安装到某个目录中 修改conf/http.conf文件 修改配置文件端口 (端口为 ...
- python---自己实现双向链表常用功能
这个和单向链表有几个功能是同样的代码. 但在add,insert,append,remove时,由于node拥有prev指针, 所以操作不一样.注意看注释. # coding = utf-8 # 双向 ...
- json,HTTP协议
JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集. 数据在名称/值对中 数据由逗号分隔 大括号保存对象 中括号保存数组 JSON 对象 JSON 对象使用在大括号({}) ...
- 如何用div绘制一个容器,例如圆形
需求:一个圆形的容器,里面有两种颜色,随比率不同而变化. 实现同一个容器中两种颜色变化的关键是css渐变 //background:linear-gradient(#818181 30%,#06FF3 ...
- 自定义InputFormat和OutputFormat案例
一.自定义InputFormat InputFormat是输入流,在前面的例子中使用的是文件输入输出流FileInputFormat和FileOutputFormat,而FileInputFormat ...
- OpenStack共享组件
一.云计算的前世今生 1.物理机架构,应用部署和运行在物理机上 2.虚拟化架构,物理机上运行若干虚拟机,应用系统直接部署到虚拟机上 3.云计算架构,虚拟化提高了单台物理机的资源使用率 二.Open ...