<?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. CentOS 查看系统 CPU 个数、核心数、线程数

    1.查看 CPU 物理个数 grep 'physical id' /proc/cpuinfo | sort -u | wc -l 2.查看 CPU 核心数量 grep 'core id' /proc/ ...

  2. openshift node资源限制

    在oc的node配置文件中添加 ...... kubeletArguments: cgroups-per-qos: - "true" cgroup-driver: - " ...

  3. [LeetCode] 876. Middle of the Linked List_Easy tag: Linked List ** slow, fast pointers

    Given a non-empty, singly linked list with head node head, return a middle node of linked list. If t ...

  4. express框架之session 存储

    1.express-session 是基于express框专门用于处理session的中间件.这里不谈express-session怎么安装,只给出相应的实例代码.另外,session的认证机制离不开 ...

  5. vue2.0--请求数据

    vue中用vue-reouse请求来的数据,会被封装一层,如下图res:

  6. Hybrid设计--如何落地一个Hybrid项目

    前后分离  ->  统一前端框架 -> 同一个账号体系  ->  登录注册的公共页 ->  有了这些公共业务后 推行 -> Hybrid 技术 底层容器开发出来后 -&g ...

  7. AM自动化测试平台

    AM自动化测试平台介绍: 最初目标:是为了做接口自动化测试,该平台,集成了,用例管理,测试执行,测试套件(主要为了应对,对场景业务流程有需要的),测试报告展示. 后期目标:适当增加,其它测试工具进行集 ...

  8. Bug 5323844-IMPDP无法导入远程数据库同义词的同义词

    参见MOS文档: Bug 5323844 - SYNONYM for a SYNONYM in remote database not imported using IMPDP (文档 ID 5323 ...

  9. Hibernate框架第三天

    **课程回顾:Hibernate第二天** 1. 持久化类和一级缓存 * 持久化类:JavaBean + 映射的配置文件 * 持久化对象的三种状态 * 瞬时态 * 持久态:有自动更新数据的能力 * 托 ...

  10. selenium获取文本

    # 标题list_title = driver.find_elements_by_xpath('//*[@id="share-content"]/div/div[1]/ul/li/ ...