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 ...
随机推荐
- 单模式串匹配----浅谈kmp算法
模式串匹配,顾名思义,就是看一个串是否在另一个串中出现,出现了几次,在哪个位置出现: p.s. 模式串是前者,并且,我们称后一个 (也就是被匹配的串)为文本串: 在这篇博客的代码里,s1均为文本串, ...
- python中的Iterable对象和Iterator
参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143178254 ...
- http协议——无连接、无状态
无连接 无连接的含义是限制每次连接只处理一个请求.服务器处理完客户的请求,并收到客户的应答后,即断开连接.采用这种方式可以节省传输时间. 早期这么做的原因是 HTTP 协议产生于互联网,因此服务器需要 ...
- Python--抽象类接口类
一. 继承有两种用途: """ 一:继承基类的方法,并且做出自己的改变或者扩展(代码重用) 二:声明某个子类兼容于某基类,定义一个接口类Interface,接口类中定义了 ...
- uni-app hbuilderX ios离线打包,启动图修改没反应
最后还是没反应 删除app从新安装, 可参考https://www.jianshu.com/p/47c1377c61d6
- Python知识目录
目录 一.计算机基础 二.Python基础 三.函数 四.常用模块 五.模块和包 六.面向对象 七.网络编程socket 八.数据库 九.前端 十.Python Web框架 十一.版本控制--GIT ...
- IntelliJ IDEA 使提示不区分大小写
File ==> Settings ==> Editor ==> General ==> Code Completion 第一行 Match case 将默认勾选去掉
- Ubuntu系统查看显卡型号和NVIDIA驱动版本
查看GPU型号 lspci | grep -i nvidia 查看NVIDIA驱动版本 sudo dpkg --list | grep nvidia-*
- matplotlib图例-【老鱼学matplotlib】
图例是啥,直接上图就知道了: 怎么创建上面的图例呢? 很简单,首先在plt.plot()函数中设置label文本属性,然后调用plt.legend()生成图例就可以了,完整的代码如下: import ...
- Python与R的区别和联系
转自:http://bbs.pinggu.org/thread-3078817-1-1.html 有人说Python和R的区别是显而易见的,因为R是针对统计的,python是给程序员设计的,其实这话对 ...