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的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...
随机推荐
- windows 批处理设置环境变量
windows通过批处理设置环境变量 CreateTime--2017年8月4日11:28:11Author:Marydon 参考链接:https://wenku.baidu.com/view/a ...
- rpcbind服务死活启动不了
在配置nfs的时候,想要实现nfs共享文件的权限共享,必须保证uid/gid一致,方可权限的传递! 错误提示 rpcbind dead but pid file exists 解决方案 service ...
- HTTP头返回码分析
http协议通讯时,在客户端发送请求后(request),服务器端返回的状态码解释(response) http状态码 1**:请求收到,继续处理 2**:操作成功收到,分析.接受 ...
- MONyog_5.6.9.0 key激活|监控MYSQL
SQLyog与MONyog是一家公司对mysql推出的商业化软件,可能大家对SQLyog很熟悉,MONyog是对mysql-server服务的监控. 脚本执行时长.安全性.等的监控! key:a668 ...
- SpringBoot之自定义验证码
代码地址如下:http://www.demodashi.com/demo/14280.html 项目介绍 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控 ...
- 老毛桃pe装机工具备份系统
电脑故障可以说是难以避免的,误操作或者修改了哪个设置系统就莫名其妙崩溃了.这在日常使用当中并不鲜见,许多用户就会寻求备份系统方法.有没有好的一键备份系统教程可以参考呢?在本篇教程中,就容我跟大家讲讲怎 ...
- HDUOJ---1754 Minimum Inversion Number (单点更新之求逆序数)
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
- HDUOJ---汉洛塔IX
汉诺塔IX Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- HDUOJ----The Number Off of FFF
The Number Off of FFF Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- 【LeetCode】145. Binary Tree Postorder Traversal (3 solutions)
Binary Tree Postorder Traversal Given a binary tree, return the postorder traversal of its nodes' va ...