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 ...
随机推荐
- 【Java编程思想笔记】反射
文章参考:学习网站 how2java.cn 参考博客:(敬业的小码哥)https://blog.csdn.net/sinat_38259539/article/details/71799078 (青色 ...
- Idea 创建控制台程序
1:前提配置好 jdk环境. 最后一步:填写项目名称和保存的路径 即可.
- IIS 一键安装及卸载
IIS6:适用于win server 2003:: ******************* :: * 安装 :: ******************* :Install Cls @echo. &am ...
- 全平台网页播放器兼容H5与Flash还带播放列表
许久不发文了,2018年第一篇文章,写点干货--关于网页播放器的问题.嗯,实际上我是在52破解首发的,当做新人贴. 目前来说,网页播放器不少,随便找找都能找到一大堆,然而好用的就那么几个,比如ckpl ...
- Jedis
需要把jedis依赖的jar包添加到工程中 连接单机版 // 第一步:创建一个Jedis对象.需要指定服务端的ip及端口. Jedis jedis = new Jedis("192.168. ...
- Javascript—DOM
1.什么是DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本 ...
- Vulnerability Scanning
1.Vulnerability scanning with Nmap Scripting Engine the Nmap Script Engine provide a alrge number of ...
- springMVC下载中文文件名乱码【转】
//遇到的现象是,下载含有中文文件名的文件时,能获取到文件,但是使用IE正常,使用firefox,chrome文件名却乱码.//既然如此,就区分一下浏览器再返回好了,处理方式如下 //RESTfull ...
- Spring 源码分析-1-启动
Spring 源码分析-1-启动 在web项目中使用spring的时候,我们会在web.xml中加入如下配置: <listener> <listener-class>org.s ...
- Codeforces 755F PolandBall and Gifts bitset + 二进制优化多重背包
PolandBall and Gifts 转换成置换群后, 对于最大值我们很好处理. 对于最小值, 只跟若干个圈能否刚好组能 k 有关. 最直观的想法就是bitset优化背包, 直接搞肯定T掉. 我们 ...