jQuery Jcrop插件用法项目示例

2021年3月16日13:01:32 发表评论 607 次浏览

在本文中, 我们将学习如何使用PHPjQuery裁剪图像Jcrop插件

注意:请下载jQuery Jcrop 插件, 并将所需文件包含在HTML代码的开头部分。

<link href =" jquery.Jcrop.min.css" rel =" stylesheet" type =" text / css" /> <script src =" jquery.min.js"> </ script> <script src =" jquery。 Jcrop.min.js"> </ script>

例子:以下HTML代码演示了Jcrop插件, 方法是获取图像文件并提供"裁剪图像"按钮以裁剪图像并在另一个HTML" div"中显示输出的裁剪图像。

<!DOCTYPE html>
< html >
  
< head >
  
     <!-- All the required libraries to
          crop the image-->
     < link rel = "stylesheet" 
         href = "jquery.Jcrop.min.css" 
         type = "text/css" />
     < script src = "jquery.min.js" ></ script >
     < script src = "jquery.Jcrop.min.js" ></ script >
  
     < style >
         body {
             width: 500px;
             height: 380px;
             font-family: Arial, Sans-serif;
         }
  
         .btnSubmitClass {
             background-color: #696969;
             padding: 5px 30px;
             border: #696969 1px solid;
             border-radius: 4px;
             color: #FFFFFF;
             margin-top: 10px;
         }
  
         input#cropBtnID {
             padding: 5px 25px 5px 25px;
             background: #D3D3D3;
             border: #98b398 1px solid;
             color: #FFF;
             visibility: hidden;
         }
  
         #outputImage {
             margin-top: 40px;
         }
     </ style >
</ head >
  
< body >
     < h2 >
         How to crop image using 
         jQuery and PHP
     </ h2 >
  
     < div >
         < img src = "gfg2.jpg" id = "cropImageID" 
                 class = "img" />< br />
     </ div >
     < div id = "btn" >
         < input type = 'button' id = "cropBtnID" 
                 value = 'Crop Image' >
     </ div >
     < div >
         < img src = "#" id = "outputImage" 
                 style = "display:none;" >
     </ div >
     < script type = "text/javascript" >
         $(document).ready(function () {
             var size;
             $('#cropImageID').Jcrop({
  
                 /* Some settings for 
                 basic configuration*/
                 allowSelect: true, allowMove: true, allowResize: true, fixedSupport: true, aspectRatio: 1, onSelect: function (c) {
                     size = { x: c.x, y: c.y, w: c.w, h: c.h };
  
                     $("#cropBtnID").css(
                         "visibility", "visible");
                 }//end onSelect
             });//end Jcrop method
  
             $("#cropBtnID").click(function () {
                 var img = $("#cropImageID").attr('src');
                 $("#outputImage").show();
                  
                 $("#outputImage").attr('src', 'image-features.php?x = ' +
                     size.x + ' & y=' + size.y +
                     ' & w=' + size.w + '&h=' + 
                     size.h + '&img=' + img);
             });
         });//end document ready fn
     </ script >
</ body >
  
</ html >

PHP代码:以下PHP代码实现了上述图像代码和颜色创建中使用的" image-features.php"文件。用于创建新映像的PHP函数是imagecreatefromjpeg()方法。使用PHP创建新的真彩色图像imagecreatetruecolor()方法。使用的其他PHP函数是imagecopyresampled()和imagejpeg().

<?php
  
// Create a new image from a file
$newImage = imagecreatefromjpeg( $_GET [ 'img' ]);
  
// Create a new true color image
$newTruecolorImage = imagecreatetruecolor(
             $_GET [ 'w' ], $_GET [ 'h' ]);
  
// Copy a portion from one image to another
imagecopyresampled( $newTruecolorImage , $newImage , 0, 0, $_GET [ 'x' ], $_GET [ 'y' ], $_GET [ 'w' ], $_GET [ 'h' ], $_GET [ 'w' ], $_GET [ 'h' ]);
     
header( 'Content-type: image/jpeg' );
  
// Display image to browser as output
imagejpeg( $newTruecolorImage );
    
exit ;
?>

输出如下:

jQuery Jcrop插件1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: