使用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,大大减少了对服务器端上传的压力。
以上就是对图片压缩的小小见解。

你可能感兴趣的:(JavaScript,PHP)