JavaScript插件图片裁剪photoClip

Posted 2022-04-14 知其黑、受其白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript插件图片裁剪photoClip相关的知识，希望对你有一定的参考价值。

阅读目录

JavaScript插件图片裁剪 photoClip

javascript插件图片裁剪 photoClip

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

1、截图

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);