基于JS实现前端压缩上传图片的实例代码
具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端压缩上传图片</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="file" id="picFile" onchange="readFile(this)" />
<img id="img" src="" alt="" />
<script>
function readFile(obj) {
var file = obj.files[0];
//判断类型是不是图片
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
dealImage(this.result, { quality: 0.5 }, function(base) {
//调用
var blob = dataURLtoBlob(base);
var newFile = new File([blob], file.name, { type: file.type });
console.log(newFile)
let r = new FileReader(); //本地预览
r.onload = function() {
$('#img').attr("src", r.result);;
}
r.readAsDataURL(newFile); //Base64
// upload(newFile);
});
}
}
//将base64转换为blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function upload(file) {
var that = this;
// 创建form对象
let param = new FormData();
// 通过append向form对象添加数据
param.append('img', file);
// 文件大小
param.append('size', file.size);
for (var n in that.params) {
param.append(n, that.params[n]);
}
// 创建ajax
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log(xhr.responseText)
}
xhr.open("POST", "yourapi", true);
// 发送表单数据
xhr.send(param);
}
/**
* 图片压缩，默认同比例压缩
* @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 = obj.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, 0, 0, w, h);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的基于JS实现前端压缩上传图片的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
js实现上传并压缩图片效果
本文实例为大家分享了js实现上传并图片压缩的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
-
js移动端图片压缩上传功能
移动端图片压缩上传功能如何实现? 做移动端开发的时候,form里面的file后台经常获取不到,用foemdata也拿不到 找到了一个formdata的脚本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-
-
Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】
本文实例讲述了Java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.Fil
-
移动前端图片压缩上传的实例
摘要:之前在做一个小游戏平台项目,有个"用户中心"模块,就涉及到了头像上传的功能.在做移动端图片上传的时候,传的都是手机本地图片,而本地图片一般都相对比较大,拿现在的智能手机来说,平时拍很多图片都是两三兆的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法.所以上传之前进行压缩处理是必要的,在网上找了很多资料之后,尝试了很多方法,遇到了很多坑,比如安卓能够成功压缩上传图片,在ios上却上传不了,折腾了很久才发现ios的坑.一下这种已经进过实践证
-
微信小程序中上传图片并进行压缩的实现代码
小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button
-
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢.然后那时候也没有想到用jquery form插件. 后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式. 方案一:iframe+form表单 <f
-
微信小程序之批量上传并压缩图片的实例代码
具体内容如下所示: 首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取 这个canvas不能隐藏,否则没效果,可以将其移至屏幕外. <canvas canvas-id='attendCanvasId' class='myCanvas'></canvas> 然后呢,就是.js文件里面的方法了 // 点击加_压缩 takePhoto: function () { var that = this; let imgViewList = that.da
-
基于JS实现前端压缩上传图片的实例代码
具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端压缩上传图片</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body>
-
基于JS实现checkbox全选功能实例代码
需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l
-
基于JS开发微信网页录音功能的实例代码
具体代码如下所示: wx.ready(function () { var startRecordflag = false var startTime = null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener('touchstart', function (event) { event.preventDefault(); startTime = newDate().getTime(); // 延时后录音,避免误操作 recordTimer =
-
基于JS实现页面悬浮框的实例代码
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35
-
基于JS实现bookstore静态页面的实例代码
先给大家展示下效果图,如果感觉还不错,请参考实现代码: bookstore静态页面代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #right{ float: right; vertical-align: middle; line-height:50px; margin-right:70
-
基于 Immutable.js 实现撤销重做功能的实例代码
浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越复杂.许多前端应用,尤其是一些在线编辑软件,运行时需要不断处理用户的交互,提供了撤消重做功能来保证交互的流畅性.不过为一个应用实现撤销重做功能并不是一件容易的事情. Redux官方文档中 介绍了如何在 redux 应用中实现撤销重做功能.基于 redux 的撤销功能是一个自顶向下的方案:引入 redux-undo 之后所有的操作都变为了「可撤销的」,然后我们不断修改其配置使得撤销功能变得越来越好用(这也是 r
-
基于Angular.js实现的触摸滑动动画实例代码
先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="
-
基于JS递归函数细化认识及实用实例(推荐)
程序调用自身的编程技巧称为递归( recursion). 一个过程或函数在其定义或说明中又直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.用递归思想写出的程序往往十分简洁易懂. 一般来说,递归需要有边界条件.递归前进段和递归返回段.当边界条件不满足时,递归前进:当边界条件满足时,递归返回. 注意: (1)
-
web前端开发JQuery常用实例代码片段(50个)
本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下