<?php

if(isset($_GET['upload']) && $_GET['upload'] == 'img'){

    //二进制数据流

    $data = file_get_contents ( 'php://input' );    // 不需要php.ini设置，内存压力小

    if(empty($data)){

        $data = gzuncompress ( $GLOBALS ['HTTP_RAW_POST_DATA'] );    // 需要php.ini设置

    }

    if(imagecreatefromstring($data) == false){

        exit('图片已损坏');

    }

    $filename=time().'.png';

    $ret = file_put_contents($filename, $data, true);

    exit('http://'.$_SERVER['HTTP_HOST'].'/'.$filename);

}

?>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="main">

    <h1>使用canvas在前端压缩图片实例页面</h1>

    <div id="body">

        <div id="effect" class="part">

            <h3>效果（400x400限制）：</h3>

            <div class="show">

                <div class="demo">

                    <p><input id="file" type="file" accept="image/gif, image/png, image/jpg, image/jpeg"></p>

                    <p id="log"></p>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    // 写log方法，演示辅助，与主逻辑无关

    var log = function (info) {

        document.getElementById('log').innerHTML += (info + '<br>');

    };

    var eleFile = document.querySelector('#file');

    if (window.FormData) {

        // 压缩图片需要的一些元素和对象

        var reader = new FileReader(), img = new Image();

        // 选择的文件对象

        var file = null;

        // 缩放图片需要的canvas

        var canvas = document.createElement('canvas');

        var context = canvas.getContext('2d');

        // base64地址图片加载完毕后

        img.onload = function () {

            // 图片原始尺寸

            var originWidth = this.width;

            var originHeight = this.height;

            log('图片原尺寸是：' + [originWidth, originHeight].join('x'));

            // 计算出目标压缩尺寸

            var maxWidth = 400, maxHeight = 400;

            // 目标尺寸

            var targetWidth = originWidth, targetHeight = originHeight;

            if (originWidth > maxWidth || originHeight > maxHeight) {

                // 图片尺寸超过400x400的限制

                if (originWidth / originHeight > maxWidth / maxHeight) {

                    // 更宽，按照宽度限定尺寸

                    targetWidth = maxWidth;

                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));

                } else {

                    targetHeight = maxHeight;

                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));

                }

                log('超过400x400的限制，图片大小限制为' + [targetWidth, targetHeight].join('x'));

            } else {

                log('图片尺寸较小，不压缩');

            }

            canvas.width = targetWidth;

            canvas.height = targetHeight;

            // 清除画布

            context.clearRect(0, 0, targetWidth, targetHeight);

            // 图片压缩

            context.drawImage(img, 0, 0, targetWidth, targetHeight);

            log('图片blob二进制形式ajax上传，当前进度<span id="percent"></span>');

            // 转为blob并上传

            canvas.toBlob(function (blob) {

                // 图片ajax上传

                var xhr = new XMLHttpRequest();

                // 显示进度的元素

                var elePercent = document.getElementById('percent');

                // 上传文件名

                var filename = encodeURIComponent(file.name).replace(/%/g, '');

                // 上传中

                xhr.upload.addEventListener("progress", function(e) {

                    elePercent.innerHTML = Math.round(100 * e.loaded / e.total) / 100 + '%';

                }, false);

                // 文件上传成功或是失败

                xhr.onreadystatechange = function(e) {

                    if (xhr.readyState == 4) {

                        if (xhr.status == 200) {

                            // 100%进度

                            elePercent.innerHTML = '100%';

                            // 显示上传成功后的图片地址

                            var response = xhr.responseText;

                            if (/^http/.test(response)) {

                                //response = response.split(filename)[0] + filename;

                                log('图片上传成功，地址是：<a href="'+ response +'" target="_blank">'+ response +'</a>');

                            } else {

                                log(response);

                            }

                        }

                    }

                };

                // 开始上传

                xhr.open("POST", '?upload=img', true);

                xhr.setRequestHeader("X_FILENAME", filename);

                xhr.send(blob);

            }, file.type || 'image/png');

        };

        // 文件base64化，以便获知图片原始尺寸

        reader.onload = function(e) {

            // 图片尺寸

            img.src = e.target.result;

        };

        eleFile.addEventListener('change', function (event) {

            file = event.target.files[0];

            if (file.type.indexOf("image") == 0) {

                log('已选择图片'+ file.name +'，大小为'+ Math.round(1000 * file.size / (1024*1024)) / 1000 +'M。');

                reader.readAsDataURL(file);

            } else {

                log('选择的文件非图片，到此为止。');

            }

        });

    }

</script>

</body>

</html>

效果图（canvas压缩图片会失真）：

php canvas 前端JS压缩，获取图片二进制流数据并上传的更多相关文章

  1. 相册选择头像或者拍照 上传头像以NSData 图片二进制格式 表单上传

    一.点击头像图片 或者按钮 在相册选择照片返回img,网络上传头像要用data表单上传 (1)上传头像属性 // 图片二进制格式 表单上传 @property (nonatomic, strong) ...

  2. 移动端 H5 拍照 从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  3. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  4. 图片纯前端JS压缩的实现

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  5. [转]js动态获取图片长宽尺寸

    http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...

  6. 转载：js动态获取图片长宽尺寸（兼容所有浏览器，速度极快）

    转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...

  7. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  8. C#远程获取图片文件流的方法【很通用】

    因为之前写的代码,也能获取到图片流信息,但是会是凌乱的线条,后百度得这个方法,必须记录一下 C# try { WebRequest myrequest = WebRequest.Create(Http ...

  9. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

随机推荐

  1. Day2 Python基础学习——字符串、列表、元组、字典、集合

    Python中文学习大本营:http://www.pythondoc.com/ 一.字符串操作 一.用途:名字,性格,地址 name = 'wzs' #name = str('wzs')print(i ...

  2. Django 框架 Form组件

    一.Form组件简介 Form组件是django中一个非常强大的组件,在处理服务端和前端的交互上大大的提高了开发人员的开发速度. Form组件的功能: 用于处理前后端的数据认证(显示错误信息) 用于生 ...

  3. [Java in NetBeans] Lesson 17. File Input/Output.

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: We want to handle the bad Error. (e.g bad input / bugs in program) ...

  4. [xdoj]1303jlz的刷题黑科技

    先分析复杂度,给的数据是1e5的,那么我们至少需要一个nlogn的算法才可以.由于答案是一个数字,首先想到是二分法(一般答案是一个数字都可以通过二分法来完成) 下面是思路: 1.可以完成题目的条件是, ...

  5. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  6. 已解决(转)关于android - apk(解析错误)解析程序包时出现问题

    如果开发的应用用户较多,那么必须保证应用在多个版本不同的设备上能够正确的运行.这就要求对各个版本比较熟悉,知道在什么版本中加入了什么新的功能或特性.但是Android的版本太多了,是个令人头疼的问题. ...

  7. Appium遇到的问题二(持续更新....)

    Python版: 1.运行Appium遇到的错误:此问题是由于JDK版本要在1.7及以上. Android开发要求. A new session could not be created. C:\Py ...

  8. 测试一体机ASM Disk online操作

    环境:3台虚拟机 RHEL 7.3 + Oracle RAC 11.2.0.4 问题现象:RAC运行正常,ASM磁盘组Normal冗余,节点主机重启,offline状态的asm disk短时间内可以直 ...

  9. 递归n!

    package sushudigui; import java.util.Scanner; public class digui { public static void main(String[] ...

  10. MACD各分时背离所对应的时间

    MACD各分时背离所对应的时间 5分钟背离结构——2小时.           15分钟背离结构——一天半(6小时).           30分钟背离结构——3天(12小时).            ...