HTML5 图片本地压缩上传插件

======================前端代码=========================

<!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; //写入成功输出图片路径
}

原文地址:https://www.cnblogs.com/lujiang/p/9443027.html

时间: 2024-10-11 07:55:20

HTML5 图片本地压缩上传插件的相关文章

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

CANVAS运用-对图片的压缩上传(仅针对移动浏览器)

最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等)上传时间过长会导致上传失败,而每次都上传原始大小的图片(后台处理压缩)十分影响用户体验,所以研究了一下通过canvas压缩图片并上传的方法,以下是整理的一些思路和心得: 一.<input type="file">获取本地图片,并将图片绘制到画布中.此处的难点在于:由于浏览器的

原生js 对图片的压缩上传

小石头原创,转载请注明出处,谢谢~! var jsoncode=(function(){ /* imgzip:图片压缩, * json: * file :必须.file类型的input按钮的选择器(#id,.class,input[type=file]...) * fileStyle:可选.是否设置按钮的样式.默认为false * widt :可选.被压缩后的图片宽度 * quality :可选.被压缩后的图片质量 * type :可选.图片格式(仅支持png-无压缩,jpeg/jpg,可压缩)

html5图片缩放后上传blob

环境:前端用的jquery    bootstrap, 后端用的springboot 前端代码:(这些代码是单独从原项目中摘取出来放在HBuilder中运行的,所以如果放在真实的项目环境的话,修改一下静态文件的路径即可) github地址:https://github.com/earnop/uploadimg 原文地址:https://www.cnblogs.com/know-more/p/11497228.html

Html5+asp.net mvc 图片压缩上传

在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 废话不多少不多说直接看代码: 本次测试使用了 zepto.min.js 插件,更新版本的下载请点击这里 主要js代码: //图片压缩处理 ; (function () { /** * 加载的时候进行抽样检测 * 在iOS中,大于2M的图片会抽样渲染 */ func

zyUpload界面绝佳、体验超棒的HTML5上传插件

一.为毛线开发它 经过了两个星期做出了两个基于HTML5的多文件上传插件,之前在做网站的时候用到文件上传这一个功能,但是大多说都是基于Flash的,正好最近HTML5很火,而且渐渐壮大起来,感觉搞前端的不会个HTML5不像是做前端的,所以就萌生了自己写一个多文件并且支持拖拽预览的插件. 二.大概思路 此插件我分了两层: 核心层zyFile:这一层只负责对文件的操作.上传,并且提供外部过滤和获取上传状态等回调方法. 控制层zyUpload:这一层负责控制着文件的过滤和一些效果的实现,用户通过参数配

PHP仿微信多图片预览上传功能

PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js...生产图片区域,上传按钮#btn可替换自己想要的图片 [html] view plain copy在CODE上查看代码片派生到我的代码片 <ul id="ul_pics" class="ul_pics clearfix"> <li><img src="logo.png" id="btn" class=

android选取本地图片及关于图片压缩上传问题

<span style="font-size:18px;">在一个项目里面,有一个需求是让用户自己选择图片,然后上传到服务器.看似一个很简单的需求,就是选择图片,把图片装好,然后通过网络请求上传到后台,OK.但是事实并非如此,因为我们可以android项目,他是open的,他有更多的可能性,当然你也会遇到更多古灵精怪的问题.</span> 获取图片有3种方法,一是自己用surface控件,利用镜头来获取图片:二是调用系统相机,并且返回拍到的图片:三是直接在利用图

移动前端图片压缩上传

摘要:之前在做一个小游戏平台项目,有个"用户中心"模块,就涉及到了头像上传的功能.在做移动端图片上传的时候,传的都是手机本地图片,而本地图片一般都相对比较大,拿现在的智能手机来说,平时拍很多图片都是两三兆的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法.所以上传之前进行压缩处理是必要的,在网上找了很多资料之后,尝试了很多方法,遇到了很多坑,比如安卓能够成功压缩上传图片,在ios上却上传不了,折腾了很久才发现ios的坑.一下这种已经进过实践证