使用JS压缩图片上传图片
代码Demo参考
对于图片压缩就我个人而言只是概念性问题。当然知识点就在那。
- 源代码分析
- HTML5的FileReader接口
- canvas drawImage接口
- toDataUrl接口转换base64编码
- PHP将base64转换成图片
- 个人注意的点点滴滴
源代码分析
先贴上源代码，其他的不多说:
index.html:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图片压缩title>
head>
<style type="text/css">
input {
margin: 10px 0;
}
textarea {
width: 100%;
height: 300px;
}
style>
<body>
<form id="myForm" action="__URL__/addChk" method="post">
<input type="file" value="image" id="img_input" name="image" />
<textarea id="result">textarea>
<p id="img_area">p>
<input type="hidden" name="">
<input type="button" value="上传" onclick="replace()">
form>
body>
html>
<script type="text/javascript">
var input = document.getElementById("img_input");
var result = document.getElementById("result");
var img_area = document.getElementById("img_area");
window.onload = function() {
//检测浏览器是否支持FileReader对象
if (typeof(FileReader) === 'undefined') {
result.innerHTML = "FileReader is not supported...";
input.setAttribute('disabled', 'disabled');
} else {
input.addEventListener('change', readFile, false);
}
};
//借鉴地址:http://www.th7.cn/web/html-css/201407/48937.shtml
function readFile() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("image only please.");
return false;
}
var reader = new FileReader();//读取用户上传的图片
reader.readAsDataURL(file);//readAsDataURL可以获取API异步读取文件数据另存为数据URL;将该URL绑定到img标签的src属性上，可以实现图片上传预览
reader.onload = function(e) {
var img = new Image,
width = 640, //图像调整
quality = 0.7, //图片质量
canvas = document.createElement("canvas"),
drawer = canvas.getContext("2d");
img.src = this.result;//这句不好理解
console.log(this.result);
img.onload = function() {
canvas.width = width;
canvas.height = width * (img.height / img.width);
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);//使用canvas drawInmage接口绘制canvas 2d中
img.src = canvas.toDataURL("image/jpeg", quality);//toDataUrl接口把图片转成base64编码字符串
console.log(img.src);
result.innerHTML = '
+ "data:image/png;base64,"+img.src + '" alt=""/>';
img_area.innerHTML = 'preview：+ img.src + '" alt="" id="generate" value="generate" />+ img.src+'" />';
}
}
}
function replace(){
document.getElementById('myForm').submit();
}
script>
view.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showtitle>
head>
<body>
恭喜你上传成功!<br/>
图片预览:<br/>
<img src="__ROOT__/{$path}">
body>
html>
php:
注意:这里使用的是thinkphp3.2.3，为啥用框架呢，方便开发
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
$this->display();
}
public function addChk(){
$base_img =I('post.hide');
//$base_img是获取到前端传递的src里面的值，也就是我们的数据流文件,哎：注意base64编码的头部部分
$base_img = str_replace('data:image/jpeg;base64,', '', $base_img);
// 设置文件路径和文件前缀名称
$path = "./";
$prefix='nx_';
$output_file = $prefix.time().rand(100,999).'.jpg';
$path = $path.$output_file;
//这句代码前加上清除输出，防止文件写入错误
ob_clean();
//创建将数据流文件写入我们创建的文件内容中
$ifp = fopen( $path, "wb" );
fwrite( $ifp, base64_decode( $base_img) );
$this->assign('path',$path);
$this->assign('filename',$output_file);
$this->display('show');
}
}
HTML5的FileReader接口
借鉴
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
当然那么多API我才不想多说，只要能看懂代码，其他有空再说。
canvas drawImage接口
借鉴
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。当然我还是不细说。
toDataUrl接口转换base64编码
借鉴
怎么理解呢？toDataUrl接口可以将图片转换成base64编码。也就是将图片转换成字符。
PHP将base64编码转换成图片
借鉴
PHP内置的base64_decode方法可以将base64编码转换成图片，这一特性很大程度上对我们图片进行上传有了很大帮助。
个人注意的点点滴滴
就个人而言，需注意以下几点:
上传文件大小限制
PHP默认对上传文件有很多限制，比入上传的文件大小必须小于2M，当然我们可以进行一些设置的修改:
打开php.ini，首先找到
file_uploads = on;是否允许通过HTTP上传文件的开关。默认为ON即是开
upload_tmp_dir;文件上传至服务器上存储临时文件的地方，如果没指定就会用系统默认的临时文件夹
upload_max_filesize = 8m;望文生意，即允许上传文件大小的最大值。默认为2M
post_max_size = 8m ;指通过表单POST给PHP的所能接收的最大值，包括表单里的所有值。默认为8M
一般地，设置好上述四个参数后，上传<=8M的文件是不成问题，在网络正常的情况下。
但如果要上传>8M的大体积文件，只设置上述四项还一定能行的通。
进一步配置以下的参数
max_execution_time = 600;每个PHP页面运行的最大时间值(秒)，默认30秒
max_input_time = 600 ;每个PHP页面接收数据所需的最大时间，默认60秒
memory_limit = 8m ;每个PHP页面所吃掉的最大内存，默认8M
把上述参数修改后，在网络所允许的正常情况下，就可以上传大体积文件了
max_execution_time = 600
max_input_time = 600
memory_limit = 32m
file_uploads = on
upload_tmp_dir = /tmp
upload_max_filesize = 32m
post_max_size = 32m
进行了这些设置后，上传大文件再也不用愁了。
除去base64编码的默认头部
记得想保存图片的时候，记得除去base64编码里面的图片头部，当然还需要在意的是:细节很重要
data:image/jpeg;base64,和data:image/jpg;base64,一个字母弄了多久，你自己知道就好了。无论如何，好好学习技术肯定没错。
$base_img = str_replace('data:image/jpeg;base64,', '', $base_img);
结果:成效还是很明显的，将4747KB的图片压缩成了114KB，大大减少了对服务器端上传的压力。
以上就是对图片压缩的小小见解。