图片压缩(pc端和移动端都适用)
最近在做移动端遇到了一个问题就是:
手机拍照后,图片过大如果上传到服务器务必会浪费带宽,最重要的是流量啊
别慌,好事儿来了,务必就会有人去研究研究图片的压缩:
鄙人结合前人的经验,结合自己实战,总结出一个方法供大家参考。
/**
* 图片压缩,默认同比例压缩
* @param {Object} path
* pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
* @param {Object} obj
* obj 对象 有 width, height, quality(0-1)
* @param {Object} callback
* 回调函数有一个参数,base64的字符串数据
*/
function dealImage(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7 //生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d'); // 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh); ctx.drawImage(that, , , w, h);
// 图像质量
if(obj.quality && obj.quality <= && obj.quality > ){
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality );
// 回调函数返回base64的值
callback(base64);
}
}
当然返回的是一个base64的一个字符串;
如果可以试着测试一下压缩后的图片大小:
// 调用函数处理图片
dealImage("路径", { // 注意:在pc端可以用绝对路径或相对路径,移动端最好用绝对路径(因为用take photo后的图片路径,我没有试成功(如果有人试成功了可以分享一下经验))
width :
}, function(base){ // 直接将获取到的base64的字符串,放到一个image标签中就可看到测试后的压缩之后的样式图了
document.getElementById("transform").src = base;
console.log("压缩后:" + base.length / + " " + base);
})
综上:主要思想就是获取到图片,利用H5 canvas技术进行图片数据化为 base64 的字符串,最后传到后台进行,后台将base64的字符串数据进行图像化储存。
图片压缩(pc端和移动端都适用)的更多相关文章
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- 项目回顾1-图片上传-form表单还是base64-前端图片压缩
第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上 ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- PC端和移动端在前端开发上的一些区别,前端里移动端到底比pc端多哪些知识
(1)———————— 前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何?我做过几年的web前端开发,就简单谈谈自己的感受吧.首先来看看PC端和移动端在前端开发上的一些区别: ( ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- pc端适配移动端
pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...
随机推荐
- bzoj 4289 PA2012 Tax——构图
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4289 可以把一个点上的边按权值排序,然后边权小的向第一个比它大的连差值的边,边权大的向第一个 ...
- bzoj 4589 Hard Nim —— FWT
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4589 先手必败,是一开始所有石子的异或和为0: 生成函数 (xpri[1] + xpri[2 ...
- CSS:CSS 颜色名
ylbtech-CSS:CSS 颜色名 1.返回顶部 1. CSS 颜色名 所有浏览器都支持的颜色名. HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色 ...
- 如何使用最简单的方法将一个已经存在的工程中使用 cocaPodfile
在网上搜索的使用 cocaPods 安装一些优秀的框架,搜索的博客大多步骤都是非常的麻烦,这里的方法非常的简单,本篇仅仅作为以后备用. 第一步:首先找到我们的工程,在终端中输入 cd 拖入已经存在 ...
- ASP.NET中MessageBox的实现
asp.net中没有MessageBox这个控件,固然可以插入Winform里的MessageBox,但一般不提倡,所以只能变通实现,主要有这几种方法: 1.直接利用javascript的alert和 ...
- eclipse neon 离线安装插件
我的eclipse版本是4.6.3,以安装svn插件为例. 网上查到很多资料都是说找到eclipse目录下"plugins"和"features"文件夹,将下载 ...
- E20180709-hm
extract vt. 提取; (费力地) 拔出; 选取; 获得
- iOS 中使用 MJExtension 遇到 关键字(id) 怎么办
MJExtension 是个人比较喜欢用的json 转model 的软件,当遇到系统关键字时就会出现崩溃,解决方式如下 1.建立Modle 解析类,服务返回数据中带有id,这个时候用字典转Mode(m ...
- AndroidStudio给Unity打jar包
环境: AndroidStudio2.0 Unity4.68 AS打jar包 新建空工程 删除无用的MainActivity等. 新建Module Module选择Android Library,起名 ...
- IT兄弟连 JavaWeb教程 JSTL定义
JSTL标签库实际上包含5个不同的标签库.JSTL1.1规范为这些标签库的URI和前缀做了预定,参见表7.3. 表3 JSTL标签库