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 ...
随机推荐
- LESS知识总结
知识体系 1.认识less 2.使用less 3.变量( variables ) 4.混合 ( mixins ) 5.嵌套规则 ( nested-rules ) 6.运算(operation ...
- DeepLearning.ai学习笔记(五)序列模型 -- week2 序列模型和注意力机制
一.基础模型 假设要翻译下面这句话: "简将要在9月访问中国" 正确的翻译结果应该是: "Jane is visiting China in September" ...
- 51nod 1228、1258 序列求和
这里一次讲两题...貌似都是板子? 所以两题其实可以一起做 [雾 noteskey 总之就是伯努利数的两道入门题啦,就是第二道有点鬼畜了,居然要任意模数的!(好吧是 1e9+7 但也没什么区别了) 伯 ...
- TCP-IP详解笔记6
TCP-IP详解笔记6 用户数据报协议和IP分片 UDP是一种保留消息边界的面向数据报的传输层协议. 不提供差错纠正, 队列管理, 重复消除, 流量控制和拥塞控制. 提供差错检测, 端到端(end-t ...
- 【原创】大叔问题定位分享(4)Kafka集群broker节点从zookeeper上消失
kafka_2.8.0-0.8.1 一 现象 生产环境一组kafka集群经常发生问题,现象是kafka在zookeeper上的broker节点消失,此时kafka进程和端口都在,然后每个broker都 ...
- P2947 [USACO09MAR]向右看齐Look Up--单调栈
单调栈真的很好用呢! P2947 [USACO09MAR]向右看齐Look Up 题目描述 Farmer John's N (1 <= N <= 100,000) cows, conven ...
- webstorm主要快捷键
1. 必备快捷键 Ctrl+/:注释当前行 F11:全屏 Alt+数字:切换打开第N个文件 Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ct ...
- java学习 之 第一个程序及认识
以前也看过一系列的java方面的程序,但是还没有正式敲过,今天正式学习并且正式敲出代码.在这里记录下来今日所得 写作工具:Notepad++ 在写作工具方面好多人建议用 记事本,但是我还是认为用 No ...
- Felx布局基础教程
网页布局即layout是css的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- Java 模拟http请求
package ln; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRea ...