php+js实现图片的上传、裁剪、预览、提交整个功能

最新推荐文章于 2021-03-26 23:24:24 发布

郭晓湉

最新推荐文章于 2021-03-26 23:24:24 发布

阅读量3.7k

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/xtqueen/article/details/9790811

版权

本文详细讲解如何使用PHP和JavaScript配合，实现图片的上传、客户端预览、裁剪操作，并最终提交处理。通过实例代码，深入理解前后端交互过程，打造完善的图片管理功能。

摘要由CSDN通过智能技术生成

首先用到的语言是php、插件imgareaselect(下载地址：http://odyniec.net/projects/imgareaselect/)，没有太多花哨的样式，index.php代码如下：
<!DOCTYPE html PUB LIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999 /xhtml">
<head>
<meta content="text/html; charset=UT F-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function preview(img, selection) {
      $('#selectbanner').data('x',selection.x1);
      $('#selectbanner').data('y',selection.y1);
      $('#selectbanner').data('w',selection.width);
      $('#selectbanner').data('h',selection.height);

      var scaleX = 100 / (selection.width || 1);
      var scaleY = 100 / (selection.height || 1);
      $('#ferret > img').css({
      width: Math.round(scaleX * 512) + 'px',//512、390是你上传图片的宽高
      height: Math.round(scaleY * 390) + 'px',
      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
      });
   }

//这里通过jQuery语法在原来图片后插入预览的小图片
$(document).ready(function () {

最低0.47元/天解锁文章

郭晓湉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
php+js实现图片的上传、裁剪、预览、提交整个功能

首先用到的语言是php、插件imgareaselect(下载地址：http://odyniec.net/projects/imgareaselect/)，没有太多花哨的样式，index.php代码如下：LIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
复制链接

扫一扫

专栏目录