素材牛VIP会员

PHP支持手势的手机端图片裁剪并上传到服务器

 所属分类:PHP/MySql-上传,常用实例教程

 浏览:7547次-  下载:811次-  评论:28次-  更新时间:2020-09-02
PHP支持手势的手机端图片裁剪并上传到服务器
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jQuery photoClip是一款支持手势的裁图插件,在移动设备上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度。本文的DEMO中还加了PHP上传。
 标签:uoload裁剪上传

基础属性

  • 难易中级
  • 语言PHP
  • 数据库

详细介绍

引入裁剪相关插件

<script src="js/iscroll-zoom.js"></script> 
<script src="js/hammer.js"></script> 
<script src="js/jquery.photoClip.js"></script>

post的是base64,后端处理base64转存图片。

$("#clipArea").photoClip({ 
    width: 200, 
    height: 200, 
    file: "#file", 
    view: "#view", 
    ok: "#clipBtn", 
    loadStart: function() { 
        $(".photo-clip-rotateLayer").html("<img src='images/loading.gif'/>"); 
        console.log("照片读取中"); 
    }, 
    loadComplete: function() { 
        console.log("照片读取完成"); 
    }, 
    clipFinish: function(dataURL) { 
        $.ajax({ 
            url: "upload.php", 
            data: {str: dataURL}, 
            type: 'post', 
            dataType: 'html', 
        }) 
    } 
});

upload.php图片上传

$base64 = htmlspecialchars($_POST['str']); 
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)) { 
    $type = $result[2]; 
    $new_file = "./uploads/" . time() . ".{$type}"; 
    if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64)))) { 
        echo '新文件保存成功:', $new_file; 
    } 
}

jquery.photoClip.js图片上传裁剪API教程

参数描述默认值
width截取区域的宽度200
height截取区域的高度200
file上传图片的<input type="text" />-
view显示截取后图像的容器的选择器或者DOM对象-
ok确认截图按钮的选择器或者DOM对象-
outputType指定输出图片的类型,可选jpg
strictSize是否严格按照截取区域宽高裁剪false
jquery.photoClip.js方法Method
-
loadStart开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入 loadStart: function() {}-
loadComplete加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入loadComplete: function() {}-
loadError加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入-
clipFinish裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入-

相关素材 - 上传,常用实例教程

讨论这个素材(28)回答他人问题或分享使用心得会奖励牛币

这***生  
2020年03月04日

留着以后可以使用

回复
in***ex  
2020年03月05日

很好的一款剪裁软件

回复
em***co  
2020年03月06日

看着还可以噢

回复
ha***ee  
2020年03月15日

好棒~~趕快來學習

回复
Ro***ng  
2020年03月16日

非常实用...

回复
闪***星  
2020年03月26日

皱眉看看,!留着下次用

回复
10***19  
2020年03月28日

这个高大上了,试试

回复
雷***g  
2020年03月29日

正好我需要给力支持

回复
la***gt  
2020年04月09日

非常实用,试一下

回复
Y2***Y2  
2020年04月19日

必须赞一下!!

回复
随***0  
2020年04月25日

留着下次用vvv

回复
这***生  
2020年05月13日

谢了!刚好合适,自己写太费时间

回复
宁***远  
2020年05月16日

太棒 了 我要下载

回复
黄***得  
2020年06月01日

下载下来学习

回复
捂***功  
2020年06月01日

刚好用的上,谢谢啦。惊喜

回复
高***售  
2020年06月09日

挺实用的

回复
马***1  
2020年06月26日

这个非常好,可以方便用户裁剪合适的图片。

回复
西***护  
2020年06月29日

可以可以高兴

回复
那***美  
2020年06月30日

我正需要 先试试 希望

回复
te***es  
2020年07月04日

很好用的代码

回复
38***38  
2020年07月05日

改改还是可以用

回复
橙***哒  
2020年07月08日

给力,正好我需要

回复
进***新  
2020年07月13日

好东西,以前用到过这个功能,只是后端不会处理BASE64的格式

回复
迁***3  
2020年07月14日

支持,真心支持便宜我等小白的

回复
橙***哒  
2020年07月29日

分数要求低,有用!

回复
旧****  
2020年08月13日

高大上,上档次

回复
随***火  
2020年08月31日

做项目用 很好

回复
yt***76  
2020年09月02日

刘明,之后可能会需要

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:811
所需牛币:80 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)