使用JS压缩图片上传图片

最新推荐文章于 2024-03-28 16:39:23 发布

thginWalker

最新推荐文章于 2024-03-28 16:39:23 发布

阅读量3.5k

点赞数 2

分类专栏： JavaScript PHP 文章标签： javascript

本文链接：https://blog.csdn.net/XZ2585458279/article/details/72794265

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

PHP

1 篇文章 0 订阅

订阅专栏

代码Demo参考
对于图片压缩就我个人而言只是概念性问题。当然知识点就在那。

源代码分析
HTML5的FileReader接口
canvas drawImage接口
toDataUrl接口转换base64编码
PHP将base64转换成图片
个人注意的点点滴滴

源代码分析

先贴上源代码，其他的不多说:

index.html:

<!DOCTYPE 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>
 <!-- 这里不使用enctype="multipart/form-data"的含义是禁止文件上传成功-->
    <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>

<!--JS部分-->
<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 = '<img src="' + "data:image/png;base64,"+img.src + '" alt=""/>';
            img_area.innerHTML = '<div class="sitetip">preview：</div><img src="' + img.src + '" alt="" id="generate" value="generate" /><input type="hidden" id="hide" name="hide" value="'+ img.src+'" />';
        }
    }
}

function replace(){
     document.getElementById('myForm').submit();
    }
</script>
<!--JS部分-->

view.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
</head>
<body>
恭喜你上传成功!<br/>
图片预览:<br/>
<img src="__ROOT__/{$path}">
</body>
</html>

php:
注意:这里使用的是thinkphp3.2.3，为啥用框架呢，方便开发

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