HTML5 图片本地压缩上传插件

最新推荐文章于 2024-05-06 10:59:29 发布
最新推荐文章于 2024-05-06 10:59:29 发布
阅读量142 收藏
点赞数
文章标签： 后端 php javascript ViewUI
原文链接：http://www.cnblogs.com/lujiang/p/9443027.html
版权 
======================前端代码=========================

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>localResizeIMG</title>
    <!--引入JQuery 用于异步上传图片-->
    <script type="text/javascript" src="dist/jquery-3.1.1.min.js"></script>
    <!--引入 lrz 插件 用于压缩图片-->
    <script type="text/javascript" src="dist/lrz.bundle.js"></script>
</head>
<body>
<input type="file" accept="image/jpeg" capture="camera">
</body>
<script>
    $("input[type=file]").change(function () {
        /* 压缩图片 */
        lrz(this.files[0], {
            width: 300 //设置压缩参数
        }).then(function (rst) {
            /* 处理成功后执行 */
            rst.formData.append('base64img', rst.base64); // 添加额外参数
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: rst.formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $("<img />").attr("src", data).appendTo("body");
                }
            });
        }).catch(function (err) {
            /* 处理失败后执行 */
        }).always(function () {
            /* 必然执行 */
        })
    })
</script>
</html>
引入插件：<script type="text/javascript" src="dist/lrz.bundle.js"></script>

绑定事件：$("input[type=file]").change(function () {/* 压缩上传处理 */});

压缩图片：lrz(file, [options]);

　　file 通过 input:file 得到的文件，或者直接传入图片路径

　　[options] 这个参数允许忽略

　　　　width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设定时会适应宽度

　　　　height {Number} 图片的最大高度，默认为原图高度

　　　　quality {Number} 图片压缩质量，取值 0 - 1，默认为 0.7

　　　　fieldName {String} 后端接收的字段名，默认：file

返回结果：promise 对象

　　then(rst) 处理成功后执行

　　　　rst.formData 后端可处理的数据

　　　　rst.file 压缩后的file对象，如果压缩率太低，将会是原始file对象

　　　　rst.fileLen 生成后的图片的大小，后端可以通过此值来校验是否传输完整

　　　　rst.base64 生成后的图片base64，后端可以处理此字符串为图片，也可以直接用于 img.src = base64

　　　　rst.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整

　　　　rst.origin 也就是原始的file对象，里面存放了一些原始文件的信息，例如大小、日期等

异步上传：processData 和 contentType 必须设为 false，否则服务端不会响应

======================后端代码=========================

<?php
$base64_image_content = $_POST['base64img'];
$output_directory = './image'; //设置图片存放路径

/* 检查并创建图片存放目录 */
if (!file_exists($output_directory)) {
    mkdir($output_directory, 0777);
}

/* 根据base64编码获取图片类型 */
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
    $image_type = $result[2]; //data:image/jpeg;base64,
    $output_file = $output_directory . '/' . md5(time()) . '.' . $image_type;
}

/* 将base64编码转换为图片编码写入文件 */
$image_binary = base64_decode(str_replace($result[1], '', $base64_image_content));
if (file_put_contents($output_file, $image_binary)) {
    echo $output_file; //写入成功输出图片路径
}
/*
 * LUploader图片压缩上传插件
 * 
 * 作者：黄磊
 * 
 * 报告漏洞，意见或建议, 请联系邮箱：xfhxbb@yeah.net
 * 
 * 创建于：2016年3月16日
 * 
 * Copyright 2016
 *
 * 获得使用本类库的许可, 您必须保留著作权声明信息。
 *
 */
(function() {
    window.LUploader = function(el, params) {
        var _self = this;
        _self.trigger=el;
        _self.params = {
            accept: 'image/*',
            multiple: false,
            maxsize: 102400,
            imgObj: {},
            showsize: false,
            quality:0.1,
            url: ''
        }
        for (var param in params) {
            _self.params[param] = params[param];
        }
        _self.init();
    };
    LUploader.prototype.init = function() {
        var _self = this;
        _self.trigger.setAttribute('accept', _self.params.accept);
        _self.params.multiple && _self.trigger.setAttribute('multiple', '');

        var btn = document.querySelector('#' + _self.trigger.getAttribute('data-LUploader'));
        btn.addEventListener('click', function() {
            _self.trigger.click();
        });
        _self.trigger.addEventListener('change', function() {
            if (!this.files.length) return;
            var files = Array.prototype.slice.call(this.files);
            files.forEach(function(file, i) {
                if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
                var reader = new FileReader();
                _self.params.imgObj.size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";
                var li = document.createElement("li");
                li.innerHTML = '<div class="LUploader-progress"><span></span><input type="hidden" value="" /></div>';
                if (_self.params.showsize) {
                    var div_size = document.createElement('div');
                    div_size.className = 'LUploader-size';
                    div_size.textContent = _self.params.imgObj.size;
                    li.appendChild(div_size);
                }
                var LUploaderList = _self.trigger.parentElement.querySelector('.LUploader-list');
                if (!_self.params.multiple) { //假如是单个上传
                    if (_self.old_li) {
                        LUploaderList.removeChild(_self.old_li);
                    } else {
                        _self.old_li = li;
                    }
                }
                LUploaderList.appendChild(li);
                LUploaderList.parentElement.nextElementSibling.style['display'] = 'none';
                reader.onload = function() {
                    var params = dataSet(_self.trigger);
                    var url = _self.params.url;
                    var result = this.result;
                    var img = new Image();
                    _self.params.imgObj.src = img.src = result;
                    li.style['background-image'] = 'url(' + result + ')';
                    if (result.length <= _self.params.maxsize) {
                        img = null;
                        _self.upload(url, params, result, file.type, li);
                        return;
                    }
                    if (img.complete) {
                        callback();
                    } else {
                        img.onload = callback;
                    }

                    function callback() {
                        var data = _self.compress(img);
                        _self.upload(url, params, data, file.type, li);
                        img = null;
                    }
                };
                reader.readAsDataURL(file);
            });
        });
    };
    LUploader.prototype.compress = function(img) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');
        var moreCanvas = document.createElement("canvas");
        var morectx = moreCanvas.getContext("2d");
        var maxsize = 100 * 1024;
        var width = img.width;
        var height = img.height;
        var ratio;
        if ((ratio = width * height / 4000000) > 1) {
            ratio = Math.sqrt(ratio);
            width /= ratio;
            height /= ratio;
        } else {
            ratio = 1;
        }
        canvas.width = width;
        canvas.height = height;
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        var count;
        if ((count = width * height / 1000000) > 1) {
            count = ~~(Math.sqrt(count) + 1);
            var nw = ~~(width / count);
            var nh = ~~(height / count);
            moreCanvas.width = nw;
            moreCanvas.height = nh;
            for (var i = 0; i < count; i++) {
                for (var j = 0; j < count; j++) {
                    morectx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                    ctx.drawImage(moreCanvas, i * nw, j * nh, nw, nh);
                }
            }
        } else {
            ctx.drawImage(img, 0, 0, width, height);
        }
        var ndata = canvas.toDataURL('image/jpeg', this.params.quality);
        moreCanvas.width = moreCanvas.height = canvas.width = canvas.height = 0;
        return ndata;
    };
    LUploader.prototype.upload = function(url, obj, basestr, type, li) {
        var text = window.atob(basestr.split(",")[1]);
        var buffer = new Uint8Array(text.length);
        var pecent = 0;
        for (var i = 0; i < text.length; i++) {
            buffer[i] = text.charCodeAt(i);
        }
        var span = li.querySelector('.LUploader-progress').querySelector('span');
        var hidden_input = li.querySelector('.LUploader-progress').querySelector('input');
        var xhr = new XMLHttpRequest();
        xhr.open('post', url);
        xhr.onload = function(e) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
                var data = JSON.parse(xhr.responseText);
                var result = data['status'];
                var text = result == 0 ? '上传成功' : '上传失败';
                span.style['width'] = '100%';
                span.innerHTML = text;
                hidden_input.value = data['path'];
            }
            else {
                span.innerHTML = '上传失败';
            }
        }
        xhr.upload.addEventListener('progress', function(e) {
            pecent = ~~(100 * e.loaded / e.total);
            span.style['width'] = pecent + '%';
            span.innerHTML = (pecent == 100 ? 99 : pecent) + '%';
        }, false);
        var data = {};
        for (var key in obj) {
            if (key !== 'luploader') {
                if (obj[key] == 'basestr') {
                    data[key] = basestr;
                } else {
                    data[key] = obj[key];
                }
            }
        };
        data = serializeObject(data);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.send(data);
    }

    function isArray(arr) {
        if (Object.prototype.toString.apply(arr) === '[object Array]') return true;
        else return false;
    };

    function serializeObject(obj) {
        if (typeof obj === 'string') return obj;
        var resultArray = [];
        var separator = '&';
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                if (isArray(obj[prop])) {
                    var toPush = [];
                    for (var i = 0; i < obj[prop].length; i++) {
                        toPush.push(encodeURIComponent(prop) + '=' + encodeURIComponent(obj[prop][i]));
                    }
                    if (toPush.length > 0) resultArray.push(toPush.join(separator));
                } else {
                    resultArray.push(encodeURIComponent(prop) + '=' + encodeURIComponent(obj[prop]));
                }
            }

        }
        return resultArray.join(separator);
    };

    function dataSet(el) {
        var dataset = {};
        for (var i = 0; i < el.attributes.length; i++) {
            var attr = el.attributes[i];
            if (attr.name.indexOf('data-') >= 0) {
                dataset[toCamelCase(attr.name.split('data-')[1])] = attr.value;
            }
        }
        return dataset;
    }

    function toCamelCase(string) {
        return string.toLowerCase().replace(/-(.)/g, function(match, group1) {
            return group1.toUpperCase();
        });
    };
})();


<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>移动端图片压缩上传</title>
    <link rel="stylesheet" href="css/LUploader.css">
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    h1{
    background-color: #19b5ee;
    color: #fff;
    font-size: 25px;
    text-align: center;
    padding: 10px;
    }
    li {
        list-style-type: none;
    }
    input {
        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    </style>
</head>

<body>
    <h1>LUploader移动端图片压缩上传</h1>
    <div class="LUploader" id="demo1">
        <div class="LUploader-container">
            <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" />
            <ul class="LUploader-list"></ul>
        </div>
        <div>
            <div class="icon icon-camera font20"></div>
            <p>单击上传</p>
        </div>
    </div>
    <script src="js/LUploader.js?r=<?php echo  time();?>"></script>
    <script>
    [].slice.call(document.querySelectorAll('input[data-LUploader]')).forEach(function(el) {
        new LUploader(el, {
            url: './upload.php',//post请求地址
            multiple: false,//是否一次上传多个文件 默认false
            maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb
            accept: 'image/*',//可上传的图片类型
            quality: 0.5,//压缩比 默认0.1  范围0.1-1.0 越小压缩率越大
            showsize:true//是否显示原始文件大小 默认false
        });
    });
    </script>
</body>

</html>

 

 

转载于:https://www.cnblogs.com/lujiang/p/9443027.html

anzhoujie4762
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 LUploader 移动端图片压缩上传插件
05-09
HTML5 LUploader 移动端图片压缩上传插件
HTML5 图片本地压缩上传插件「localResizeIMG」
殇蓝的博客
09-14 1605
移动应用中用户往往需要上传照片，但是用户上传的照片尺寸通常很大，而手机的流量却很有限，所以在上传前对图像进行压缩是很有必要的。 原生应用可以直接对文件进行处理，网页应用就没有这个优势了。不过 canvas 的出现给出一条新的思路，将图像按照比例绘制到画布上，最后将绘制完成的画布以 base64 编码方式发送到服务端，再由服务端进行解析还原成图片。 由于进行处理...
H5 图片压缩上传
jjting的专栏
11-08 3974
H5活动已十分普遍，其中一种形式是让用户上传图片进行参与。移动端上传图片，用户一般都是上传手机相册中的图片，而现在手机的拍摄质量越来越高，一般单张照片的尺寸都在3M左右。若直接上传，十分耗流量，并且体验效果也不佳。因此需要在上传之前，先进行本地压缩。接下来总结在h5活动的开发中图片压缩上传的功能，并标记其中踩过的几个坑，分享给大家：小白区必看对于移动端图片上传毫无概念的话，需要补充FileReade
HTML5实现图片压缩上传功能
热门推荐
程序猿开发日志【学习永无止境】
03-29 1万+
上篇文章中提到移动端上传图片，我们知道现在流量还是挺贵的，手机的像素是越来越高，拍个照动不动就是好几M，伤不起。虽然客户端可以轻轻松松实现图片压缩再上传，但是我们的应用还可能在浏览器里面打开，怎么办呢，图片压缩。受以前PC上的开发思维影响，尼玛js哪有权限去操作文件，哪有资格压缩图片啊，搞不了，你们客户端去整吧。只能说自己还是有些井底之蛙了。在HTML5的影响下，前端能干的事情越来越多了，开发的功
HTML5实习手机端浏览器拍照和本地上传
luobw的博客
12-17 1308
开题 上两张效果图，满足一下眼界~~效果是在同局域网下手机上模拟，该程序暂不支持PC端读取摄像头！ 前端代码 <div class="idnojust"> <div class="just">证件照正面<span class="show" style="color:red;vertical-align:middle;padding-top:5px;">*</span></div> ..
前端图片上传前压缩处理
h_jQuery的博客
04-25 885
图片压缩
vue上传图片并压缩
qq_31001061的博客
05-12 1043
需求：点击用户头像选择本地图片压缩上传到服务器 这里用vant UI组件的Uploader 文件上传 按需加载Uploader import {Uploader} from 'vant'; Vue.use(Uploader) 在dom上 <van-uploader :after-read="updateFile" accept="image/jpg" :max-size="10485760" @oversize="fileMax"> <img :src="..
HTML5+Canvas手机拍摄，本地压缩上传图片，案例实测报告。
wang_quan_li的专栏
04-04 2232
做了个微信的HTML5拍摄上传照片功能，问题重重...   前端代码 01 $(':file').on('change',function(){ 02         var file = this.files[0]; 03         var url =
利用html5调用本地摄像头拍照上传图片
u598975767的专栏
04-27 1万+
html5概念啥的就不废话了，不知道的 百度， 谷歌一堆。。今天学了学html5中的Canvas结合新增的标签来获取本地摄像头，在html5之前，要在浏览器获取本地摄像头只有通过插件（ActiveX，但是这种只有IE支持）或者是flash来获取（或许你没学过flash那就很坑爹了），在之后微软的silvertlight中也可以获取，但这些都比较麻烦，在html5的世界里，要获取本地摄像头，只要
vue 项目使用图片压缩工具localResizeIMG（前端本地客户端压缩图片）
wj1224_的博客
09-10 1251
使用背景 项目有一个图片上传功能，选择相册的图片然后进行上传，或者直接拍照上传图片，但是这样造成服务器压力很大，因为项目的用户量很大，上传的图片就多。所以就来了一个新需求——在用户上传时，先将图片压缩，然后在上传到服务器端。 localResizeIMG的优点 移动设备上兼容性好（兼容IOS，Android，PC） 节省带宽 上传速度快 实现步骤 github地址： https://githu...
discuz插件编辑器H5上传修正版.zip
11-16
1、支持HTML5图片附件上传 电脑版插件开启后系统自动使用HTML5上传，若浏览器不支持HTML5上传则自动改用Flash上传，同时支持门户、论坛、群组、相册、日志、广播。 2、支持图片压缩上传 图片一般都会占服务器的大...
shearphoto2.0版 -HTML5本地截图插件，拍照截图插件
09-05
shearphoto含HTML5图片压缩功能！一张十M 二十M的图，照样能帮你压成你要的容量和尺寸， 一般情况下！商城的商品图片都是通过数码相机拍摄后，要用PHOTOshop把数码相机内几十M的图片，压缩，截取，然后才能上传到...
js+html精美UI界面图片在线压缩源码
05-02
js+html精美UI界面图片在线压缩源码 本地化接口上传即用 感觉就是把图片分辨率改了一下。 反正也确实文件变小了 一款很好看的图片压缩网站，原本的源码引用的国外js站点，已下载放到本地调用了，访问速度更快
高效批量图片压缩、尺寸调整及格式转换HTML源码
10-18
批量压缩png jpg jpeg webp， 批量更改图片尺寸 , 批量转换格式HTML源码，这一切都是基于本地执行,不会将您的数据上传到服务器或虚拟空间
mobileUpLoadImage:移动端图片上传并处理
05-10
直接上传图片（由于移动端照出来的图片会比较大，这种方式上传的图片没有经过压缩，上传时间比较长且有可能失败）直接通过某些兼容移动端的插件进行上传通过URL.createObjectURL的方式读取图片并处理后上传base64...
uniapp h5端上传图片压缩转Blob上传
weixin_41521961的博客
06-24 5185
1. 图片压缩使用 uniapp 插件市场上的压缩插件，地址：https://ext.dcloud.net.cn/plugin?id=1718 2. 新建一个js文件，写toBlob的方法 constbase64ToBlob=({b64data='',contentType='',sliceSize=512}={})=>{ returnnewPromise((resolve,reject)=>{ //使用atob()方法将数据解...
1.6 Java全栈开发前端+后端（全栈工程师进阶之路）-前置课程Jdbc编程，使用Java通过Jdbc对数据库进行基础操作
明裕学长的博客
05-01 982
统一资源定位系统（uniform resource locator;URL）是因特网的万维网服务程序上用于指定信息位置的表示方法。它最初是由蒂姆·伯纳斯·李发明用来作为万维网的地址。现在它已经被万维网联盟编制为互联网标准RFC1738。(百度百科)URL是统一资源定位符，代表网络中的某个资源的绝对路径通过URL可以定位网络中的资源URL主要包含四部分：协议、IP、端口号和资源名称。
使用IIS部署Vue项目
最新发布
weixin_44656422的博客
05-06 418
使用IIS部署Vue项目，后端必须跨域，不要在Vue中用proxy跨域，那个只在dev环境中有用！IIS安装，不用全部打勾，有些他默认就是方块 ■ 选择性安装的，就维持原样就可以。
高并发支持的RSA文件加解密后端接口设计与实现
焱宣的博客
05-05 209
在现代信息安全领域，RSA算法是一种常用的非对称加密算法，被广泛应用于数据传输和文件加密。为了实现安全可靠的文件传输和存储，设计一个支持高并发、日志打印详细的RSA文件加解密后端接口至关重要。通过以上的设计与实现，我们可以构建一个高并发、安全可靠的RSA文件加解密后端接口，满足现代信息安全需求，保障数据传输和存储的安全性和稳定性。
uniapp上传图片压缩插件
09-09
在uniapp开发中，如果需要上传图片，可以选择使用图片压缩插件来减小图片的大小，提高上传效率。 目前，uniapp上使用的图片压缩插件主要有两种方式：基于canvas的压缩和使用第三方压缩库。 基于canvas的压缩方法是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值