利用html5压缩图片,产出base64图片
/* 将页面选择的图片等比压缩成指定大小(长边固定)
file:图片文件
callBack:回调函数
maxLen:长边的长度
*/
function makePic(file,callBack,maxLen){
var url = webkitURL.createObjectURL(file);
/* 生成图片 */
var $img = new Image();
$img.src = url;
// $('body').append($img);
$img.onload = function() {
//生成比例
var width = $img.width,height = $img.height;
//计算缩放比例
var rate=1;
if(width>=height){
if(width>maxLen){
rate=maxLen/width;
}
}else{
if(height>maxLen){
rate=maxLen/height;
}
}
$img.width=width*rate;
$img.height=height*rate;
//生成canvas
var $canvas =$('#thecanvas');
var ctx = $canvas[0].getContext('2d');
$canvas.attr({width : $img.width, height : $img.height});
ctx.drawImage($img, 0, 0, $img.width, $img.height);
var base64 = $canvas[0].toDataURL('image/jpeg',0.9);
callBack(base64);//
} } $('.unPic_list input[type=file]').bind('change',function(e){
var that=this;
for(var j=0;j<e.target.files.length;j++){
makePic(e.target.files[j],function(imgStr){
var img = new Image();
img.src=imgStr;
img.onload=function(){
$('body').append(img);
/*此处将 imgStr.substr(22)操作即的图片二进制流,可发送到服务器*/ } },750); } })
利用html5压缩图片,产出base64图片的更多相关文章
- 移动端实现裁剪图片生成base64图片(可缩放)
移动端实现裁剪图片生成base64图片(可缩放)<pre><!DOCTYPE html><html lang="en"> <head> ...
- 利用HTML5,前端js实现图片压缩
http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnav ...
- 利用html5的画布canvas进行图片压缩处理
在网上找的代码,按自己的需求改了下,忘记在哪找的了.这里记着方便自己以后学习. // 参数,最大高度 //var MAX_HEIGHT = 100; var MAX_WIDTH = 200; // 渲 ...
- 基于vue上传base64图片,通过canvas压缩base64
其实和vue关系不大,和我们之前做上传压缩性质是一样的 当然下面的代码是没有处理ios横屏拍照的bug的 有兴趣的可以多搜一下 网上都有相应的解答 .. var that = this if (e. ...
- 图片与Base64的转换
图片转为Base64 // 图片转化成base64字符串 public static String GetImageStr() {// 将图片文件转化为字节数组字符串,并对其进行Base64编码处理 ...
- JS 图片转Base64
JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...
- vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法
HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...
- HTML5 JS 压缩图片,并取得图片的BASE64编码上传
基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...
- 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
随机推荐
- Fine Uploader 简单配置方法
由于jquery.uploadify是基于flash的jquery上传控件,客户老是说出问题,所以今天换成了一个纯js的异步上传控件. 这方面的资料很少,故此记下来分享一下. 项目地址:Fine Up ...
- Moss列表查询,删除条目,更新条目。
基于Query语句的列表查询 function retrieveListItems(itemId) { var siteUrl=_spPageContextInfo.webServerRelat ...
- svn回滚
有时会因为某些原因会错误提交某些文件: 1,官方版本库升级,自己的库代码也要跟着升级,但发现使用官方代码后有问题,代码需要回滚到可用的版本: 2,拷贝一个项目的代码到另外一个项目,把整个代码目录也拷贝 ...
- caffe的matlab接口一览表
blob 简述 方法: shape reshape get_diff set_diff 私有方法: check_and_preprocess_shape check_and_preprocess_da ...
- Kickstart 自动化安装配置
自动化安装案例: 一 ,系统环境 # cat /etc/redhat-release CentOS release 6.6 (Final) #Hostname [root@boot ~]# hostn ...
- Timewarp 一种生成当中帧技术,异步时间扭曲(Asynchronous Timewarp)
翻译: https://www.oculus.com/blog/asynchronous-timewarp/ 异步时间扭曲(Asynchronous Timewarp 时间扭曲,即调整时长) 关 ...
- 包(package)
防止文件重名,包体现在文件夹上.包必须建立文件夹. 类名的全称是:包名.类名 javac xx.java 命令编译的时候,不会建立对应的文件夹, 建立包对应的文件夹的命令,要用 javac -d ...
- 内存管理 & 内存优化技巧 浅析
内存管理 浅析 下列行为都会增加一个app的内存占用: 1.创建一个OC对象: 2.定义一个变量: 3.调用一个函数或者方法. 如果app占用内存过大,系统可能会强制关闭app,造成闪退现象,影响用户 ...
- iOS开发frame, contentSize, contentOffset, contentInset 区别联系浅析
1. 概述 iOS开发中,必然会涉及到布局相关问题,frame,bounds,contenSize,contentOffset,contentInset这几个布局相关概念让许多初学者感到困惑.虽然初步 ...
- robot framework -记录关键字
1.set value if (当条件满足时,进行变量赋值) 2.focus (将焦点定在制定的元素) 3.win close +title(关闭制定title) 4.get list items ...