js图片转base64并压缩
- /* 2015-09-28 上传图片*/
- function convertImgToBase64(url, callback, outputFormat){
- var canvas = document.createElement('CANVAS');
- var ctx = canvas.getContext('2d');
- var img = new Image;
- img.crossOrigin = 'Anonymous';
- img.onload = function(){
- var width = img.width;
- var height = img.height;
- // 按比例压缩4倍
- var rate = (width<height ? width/height : height/width)/4;
- canvas.width = width*rate;
- canvas.height = height*rate;
- ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
- var dataURL = canvas.toDataURL(outputFormat || 'image/png');
- callback.call(this, dataURL);
- canvas = null;
- };
- img.src = url;
- }
- function getObjectURL(file) {
- var url = null ;
- if (window.createObjectURL!=undefined) { // basic
- url = window.createObjectURL(file) ;
- } else if (window.URL!=undefined) { // mozilla(firefox)
- url = window.URL.createObjectURL(file) ;
- } else if (window.webkitURL!=undefined) { // web_kit or chrome
- url = window.webkitURL.createObjectURL(file) ;
- }
- return url ;
- }
- // 前端只需要给input file绑定这个change事件即可(上面两个方法不用管)huodong-msg为input class
- $('.huodong-msg').bind('change',function(event){
- var imageUrl = getObjectURL($(this)[0].files[0]);
- convertImgToBase64(imageUrl, function(base64Img){
- // base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
- alert(base64Img);
- // base64转图片不需要base64的前缀data:image/jpg;base64
- alert(base64Img.split(",")[1]);
- });
- event.preventDefault();
- });
- /* 2015-09-28 */
js图片转base64并压缩的更多相关文章
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS 图片转Base64
JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...
- 前端JS转图片为base64并压缩、调整尺寸脚本
image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...
- vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法
HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...
- js 图片与base64互相转换
js将图片转化为base64 参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html var img = "imgurl" ...
- js 图片转换为base64
<input id="file" type="file"> <img id="img" style="max-h ...
- js 图片转换base64 base64转换为file对象
function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...
- js 图片转换为base64 (2)
<input type="file" id="testUpload"> <img src="" id="img& ...
- JS图片转Base64
网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...
随机推荐
- Unity 文字爆炸(风化)消失效果 粒子系统应用
利用Unity的粒子系统,使用C#代码控制粒子的位置和速度,实现文字风化爆炸的效果. Unity的东西,不像flash,不能直接放到网页中,没办法了,只能放截图了.有兴趣的可以下载看看:text_ex ...
- Divisibility by Eight
把当前数删除几位然后能够整除与8 那么可得知大于3位数的推断能否整除于八的条件是(n%1000)%8==0 能够得出我们的结论:仅仅须要枚举后三位后两位后一位就可以知道是否可整除于8 #include ...
- PHP原生实现,校验微信公众号||小程序服务器地址
1.原生的.php文件: test.php <?php header('Content-type:text'); define("TOKEN", "weixin& ...
- tomcat 的配置文件 server.xml 详解
server.xml位于$TOMCAT_HOME/conf目录下,作为整个 tomcat 服务器最核心的配置文件,server.xml的每一个元素都对应了 tomcat中的一个组件,通过对xml中元素 ...
- cxf使用wsdl文件生成代码
1.先下载cxf包 http://cxf.apache.org/download.html,现在cxf包.(下载资源就有) 2.解压缩包,通过cmd命令进入到bin目录下(cd cxf\bin的路径) ...
- C++知识整理(进制)
++输出二进制.十进制.八进制和十六进制总结 分类: C++ 2013-01-14 02:26 592人阅读 评论(0) 收藏 举报 在C++中,默认状态下,数据按十进制输入输出.如果要求按八进制或十 ...
- 非IE内核浏览器如何支持activex插件
原文地址:https://blog.csdn.net/johnson2008t/article/details/46126605 之前在一个B/S项目中遇到一个需求,就是客户需要在页面上对报表的布局以 ...
- Redis客户端
1.自带的: Redis-cli 2.redis-desktop-manager-0.7.9.809 是一个图形化客户端 但是不支持集群 **由于linux防火墙默认开启,redis的服务端口63 ...
- page_address()函数分析
由于X86平台上面,内存是划分为低端内存和高端内存的,所以在两个区域内的page查找对应的虚拟地址是不一样的. 一. x86上关于page_address()函数的定义 在include/linux/ ...
- iOS开发打包
ios11个论坛地址 邓白氏编码 邓白氏申请 http://blog.fir.im/faq/ AdHoc,InHouse,App Store Account Type: InHouse ( ...