JavaScript插件图片裁剪photoClip

清疚 2023-10-06 22:22 49阅读 0赞

#### 阅读目录 ####

*  JavaScript插件图片裁剪 photoClip
 *   *  1、截图
     *  2、代码
     *  后台接收并处理图片代码

## JavaScript插件图片裁剪 photoClip ##

页面裁剪图片得到 base64 格式的图片数据，然后把这个数据通过 ajax 上传给服务器，服务器将 base64 图片数据解析成图片并且保存到服务器上面，并且返回图片在服务器上的地址。

### 1、截图 ###

![在这里插入图片描述][59ea56b20e724385ae76b37f6b2ec604.gif_pic_center]

### 2、代码 ###

源码：https://download.csdn.net/download/weiguang102/85117408

<!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>裁剪图片演示-带初始值</title>
    <link rel="stylesheet" type="text/css" href="./dist/amazeui.min.css" />
    <style type="text/css">
    #clip {
          
    	width: 100%;
    	height: 400px;
    }
    </style>
    </head>
    
    <body>
    <div id="clip"></div>
    
    <div class="am-margin-sm">
        <button type="button" class="am-btn am-btn-primary" id="toggle-file">上传头像</button>
        <button type="button" class="am-btn am-btn-primary" id="clipBtn">裁剪</button>
    </div>
    
    <input class="am-hide" type="file" id="file">
    
    <img class="am-img-circle" id="img-view"/>
    
    <script src="./dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./dist/iscroll-zoom.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./dist/hammer.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./dist/photoClip.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
    $(function() {
          
        var $clip = $("#clip");
        var $file = $("#file");
        $("#toggle-file").click(function() {
          
            $file.trigger("click");
        });
    
        $clip.photoClip({
          
            width: 400,
            height: 300,
            fileMinSize: 20,
            file: $file,
            defaultImg: "./img/4.jpg",
            ok: "#clipBtn",
            loadStart: function() {
          
                console.log("照片读取中");
            },
            loadProgress: function(progress) {
          
                console.log(progress);
            },
            loadError: function() {
          
                console.log("图片加载失败");
            },
            loadComplete: function() {
          
                console.log("照片读取完成");
            },
            imgSizeMin: function(kbs) {
          
                console.log(kbs, "上传图片过小");
            },
            clipFinish: function(dataURL) {
          
                document.getElementById("img-view").src = dataURL;
    
                $.post("http://tt.cc/testData/A.php", {
           dataURL: dataURL},
                    function(data){
          
    					alert("Data Loaded: " + data);
                    });
                console.log(dataURL);
            }
        });
    })
    </script>
    
    </body>
    </html>

### 后台接收并处理图片代码 ###

<?php
    //print_r($_POST);
    $base_img=$_POST['dataURL'];
    // $base_img是获取到前端传递的值
    $base_img = str_replace('data:image/jpeg;base64,', '', $base_img);
    //  设置文件路径和命名文件名称
    $path = "./";
    $output_file = time().rand(100,999).'.jpeg';
    $path = $path.$output_file;
    //  创建将数据流文件写入我们创建的文件内容中
     file_put_contents($path, base64_decode($base_img));
    // 输出文件
    print_r($output_file);

[59ea56b20e724385ae76b37f6b2ec604.gif_pic_center]: https://img-blog.csdnimg.cn/59ea56b20e724385ae76b37f6b2ec604.gif#pic_center