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. MySql常见约束

    含义:一种限制,用于限制表中的数据,为了保证表中数据的准确性和可靠性. 分类:六大约束 1.NOT NULL :非空,用于保证该字段的值不能为空.例如学生表的学生姓名及学号等等. 2.DEFAULT: ...

  2. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  3. 1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

    1.前言 至于 Flutter 是啥,我就不在这啰嗦了,下面以 windows 为例,展示一下从安装 Flutter 到运行 APP 整个过程: 2.安装 Flutter 2.1.中文介绍文档:htt ...

  4. oracle dmp文件导出与导入

    ORACLE 10g导入 ORACLE 11g 一.expdp.sh导出dmp文件export PATH=$PATH:$HOME/binexport ORACLE_BASE=/oracleexport ...

  5. CentOS7部署Django,nginx,uwsgi,redis

    前期准备 把所有的软件都传到这个tools文件夹 cd - mkdir tools cd tools/ mkdir /application 安装nginx yum install pcre pcre ...

  6. codeforces 502 g The Tree

    题解: 一道优秀的题目 有几种做法: 1.维护后缀和 刚开始我想的是维护前缀和 然后用$sum[x]-sum[y]>=dep[x]-dep[y]$来做 但是这样子树赋值为0这个操作就很难进行了 ...

  7. spark MLlib Classification and regression 学习

    二分类:SVMs,logistic regression,decision trees,random forests,gradient-boosted trees,naive Bayes 多分类:  ...

  8. MyCat-简介

    一MyCat简介 java编写的数据库中间件 Mycat运行环境需要JDK. Mycat是中间件.运行在代码应用和MySQL数据库之间的应用. 前身 : corba. 是阿里开发的数据库中间件.实现M ...

  9. PSO:利用PSO算法优化二元函数,寻找最优个体适应度—Jason niu

    figure [x,y] = meshgrid(-5:0.1:5,-5:0.1:5); z = x.^2 + y.^2 - 10*cos(2*pi*x) - 10*cos(2*pi*y) + 20; ...

  10. ASP.NET Core 3.0预览版体验

    目前.NET Core 3.0的版本为.NET Core 3.0 Preview 3,对应ASP.NET Core 3.0 Preview 3. ASP.NET Core 3.0 之后将不再支持.NE ...