photoclip php,PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

太过爱你忘了你带给我的痛 2022-11-12 08:27 133阅读 0赞

php+jquery.photoclip.js支持手势的图片裁剪上传实例，在手机上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度，在电脑上鼠标滚轮为缩放，双击则顺时针旋转90度。

![6486a1600a9fa15f401a19565d707e2b.png][]

下面让我们来看看核心代码：

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

1 $("\#cliparea").photoclip(\{

2 width: 200,

3 height: 200,

4 file: "\#file",

5 view: "\#view",

6 ok: "\#clipbtn",

7 loadstart: function() \{

8 $(".photo-clip-rotatelayer").html("![loading.gif][]");

9 console.log("照片读取中");

10 \},

11 loadcomplete: function() \{

12 console.log("照片读取完成");

13 \},

14 clipfinish: function(dataurl) \{

15 $.ajax(\{

16 url: "upload.php",

17 data: \{str: dataurl\},

18 type: 'post',

19 datatype: 'html',

20 \})

21 \}

22 \});

upload.php图片上传

1 $base64 = htmlspecialchars($\_post\['str'\]);

2 if (preg\_match('/^(data:\\s\*image\\/(\\w+);base64,)/', $base64, $result)) \{

3 $type = $result\[2\];

4 $new\_file = "./uploads/" . time() . ".\{$type\}";

5 if (file\_put\_contents($new\_file, base64\_decode(str\_replace($result\[1\], '', $base64)))) \{

6 echo '新文件保存成功：', $new\_file;

7 \}

8 \}

本实例源码下载：

希望与广大网友互动？？

点此进行留言吧！

[6486a1600a9fa15f401a19565d707e2b.png]: /images/20221022/310c62ff06064372a74df8aacf7345d8.png
[loading.gif]:

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 photoclip php,PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

php+jquery.photoclip.js支持手势的图片裁剪上传实例，在手机上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度，在电脑上鼠标滚轮为缩放，双击则顺时针旋转

太过爱你忘了你带给我的痛/ 2022年11月12日 08:27/ 0 赞/ 134 阅读

相关 react-cropper图片裁剪并上传

react-cropper图片裁剪并上传 [官方Demo][Demo] [github][] 1、安装 npm install --save react

╰半夏微凉°/ 2022年11月11日 05:10/ 0 赞/ 285 阅读

相关 vuecropper图片裁剪上传参考示例

<template> <div> <el-row> <el-col :span="10"> <d

我就是我/ 2022年10月29日 07:50/ 0 赞/ 330 阅读

相关图片裁剪上传

1.实现方式:使用jquery插件 imagecropper.js demo： <!DOCTYPE html> <html> <head>

矫情吗；*/ 2022年06月14日 12:06/ 0 赞/ 418 阅读

相关 cropper裁剪图片并上传

引入cropper所依赖的js和css，可在官网下载。我的资源地址：[https://download.csdn.net/download/rexueqingchun

深碍√TFBOYSˉ_/ 2022年05月17日 09:48/ 0 赞/ 284 阅读

相关 pc和移动端图片裁剪插件PhotoClip的踩坑

遇到的问题有，苹果手机上传的图片会自动旋转，安卓手机上要裁剪图片的无法进行缩放（github上查到原因iscroll插件的bug，替换到2.X版本可修复），已填坑文章参考[

梦里梦外;/ 2022年02月16日 13:01/ 0 赞/ 259 阅读

相关 copper实现图片的裁剪和上传(1)

需要引入的css <link href="../cropper/cropper.min.css" rel="stylesheet" media="screen" />

傷城~/ 2021年11月10日 15:12/ 0 赞/ 340 阅读

相关上传及裁剪图片（WebUploader+cropper）

通过[百度上传webuploader使用与注意细节][webuploader]和[ jQuery.cropper中文API详解][jQuery.cropper_A

不念不忘少年蓝@/ 2021年09月14日 02:30/ 0 赞/ 706 阅读

相关 uni-app实现图片的上传和裁剪

uni-app实现图片的上传和裁剪 uni-app 实现图片的上传和裁剪，插件市场上已经有作者提供了相关的插件。这里主要介绍下我在自己开发图片上传和裁剪过程中遇到的一些问

Myth丶恋晨/ 2021年08月19日 18:27/ 0 赞/ 3729 阅读

相关 cropper.js 裁剪图片并上传

官网[http://fengyuanchen.github.io/cropper/][http_fengyuanchen.github.io_cropper] 文档[htt

小鱼儿/ 2021年08月19日 11:40/ 0 赞/ 585 阅读