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. mysl 常用函数 union all if ifnull exists case when

    1.union all UNION 操作符用于合并两个或多个 SELECT 语句的结果集.请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 S ...

  2. 拓扑排序(Topological Sorting)

    一.什么是拓扑排序 在图论中,拓扑排序(Topological Sorting)是一个有向无环图(DAG, Directed Acyclic Graph)的所有顶点的线性序列.且该序列必须满足下面两个 ...

  3. Python基础【第一篇】

     一.Python简介 Python的创始人(Guido von Rossum 荷兰人),Guido希望有一种语言既能像C一样方便地调用操作系统的功能接口,也能像shell脚本一样,轻松地实现编程,A ...

  4. java 利用jsoup 爬取知乎首页问题

    今天学了下java的爬虫,首先要下载jsoup的包,然后导入,导入过程:首先右击工程:Build Path ->configure Build Path,再点击Add External JARS ...

  5. Allegro PCB Design GXL (legacy) 将brd文件另存为低版本文件

    Allegro PCB Design GXL (legacy) version 16.6-2015 参考:https://blog.csdn.net/qq_29761395/article/detai ...

  6. 微信小程序语音与讯飞语音识别接口(Java),Kronopath/SILKCodec,ffmpeg处理silk,pcm,wav转换

    项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 首先去讯飞开放平台中申请开通语音识别功能 在这里面下载sdk,然后解压,注意appid与sdk是关联的,appid在初始 ...

  7. Sqlserver 锁(转)

    转载 http://www.cnblogs.com/zhouqianhua/archive/2011/04/15/2017049.html 总结:    锁的种类: 共享锁\排它锁\更新锁\意向锁\计 ...

  8. windows和linux换行规则的区别

    在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符.但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字符.要是在这 ...

  9. python运算符——比较运算符

    比较运算符的运算结果会得到一个bool类型,也就是逻辑判定,要么是真True,要不就是False 大于“>”  小于“<”  不说了,看看不等于,用“!=”表示.大于等于“>=”和小 ...

  10. 一、自动化平台搭建-python虚拟环境安装

    主要知识点介绍: 安装django环境 创建django项目 设计模型类并利用模型类和数据库进行交互 使用django后台管理数据 编写视图函数,进行URL配置 模板的使用 图书-英雄案例完成 1.虚 ...