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的更多相关文章

  1. 用FileReader对象获取图片base64代码并预览

    MDN中FileReader的详细介绍: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 用FileReader获取图片base ...

  2. Java通过图片url地址获取图片base64位字符串的两种方式

    工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...

  3. 小程序获取图片base64编码

    项目中遇到了这个问题,在搜索过程中看到别人的博文,大多是下面这种方法,大致如下: let imgObj = { count: 1, success: (res) => { let tempFil ...

  4. FileReader 获取图片BASE64 代码 并预览

    FileReader 获取图片的base64 代码 并预览 FileReader ,老实说我也不怎么熟悉.在这里只是记录使用方法. 方法名 参数 描述 abort none 中断读取 readAsBi ...

  5. js canvas压缩图片上传

    $('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...

  6. 获取图片base64编码的几种方法

    前文中我们聊了 Data URI 和 base64编码,稍微回顾下.base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,ba ...

  7. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  8. [转]js动态获取图片长宽尺寸

    http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...

  9. 转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)

    转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...

随机推荐

  1. spawn-fcgi启动的一些报错问题

    spawn-fcgi启动报错 //编译生成bin文件,这里用到了fcgi和google的glog # g++ test.cpp -lfcgi -lglog -o test //运行 # spawn-f ...

  2. underscore用法大全

    1._.find函数 var one = _.find(all, function (item) { return item.C_ID == selected; }); $('#C_NAME').va ...

  3. python 进程、线程与协程的区别

    进程.线程与协程区别总结 - 1.进程是计算器最小资源分配单位 - 2.线程是CPU调度的最小单位 - 3.进程切换需要的资源很最大,效率很低 - 4.线程切换需要的资源一般,效率一般(当然了在不考虑 ...

  4. Diango 框架起步

    一.命令行搭建Django项目 安装django # 在指定解释器环境下安装django 1.11.9# 在真实python3环境下: pip3 install django==1.11.9# 在虚拟 ...

  5. jupyter notebooks 中键盘快捷键

    键盘快捷键——节省时间且更有生产力! 快捷方式是 Jupyter Notebooks 最大的优势之一.当你想运行任意代码块时,只需要按 Ctrl+Enter 就行了.Jupyter Notebooks ...

  6. SpringBoot整合mybatis多数据源,支持分布式事务

    编码工具:IDEA SpringBoot版本:2.0.1 JDK版本:1.8 1.使用IDEA构建一个Maven工程 ,添加依赖: <?xml version="1.0" e ...

  7. 《剑指offer》字符串的排列

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  8. hdu3652 数位dp记忆化搜索

    从未见过的船新版本数位dp,,省去了预处理过程,直接进行计算 #include<bits/stdc++.h> using namespace std; #define ll long lo ...

  9. 咸鱼入门到放弃6--jsp<一>三指令

    JSP全称是Java Server Pages 它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术.JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比htm ...

  10. JWT( JSON Web Token)

    参考  https://laravelacademy.org/post/9469.html 三部分组成,头部.载荷与签名 头部 把下面的基本信息base64 加密生成头部信息 { "typ& ...