Resize và Crop Hình ảnh bằng PHP cùng jQuery.

Thay đổi kích thước và cắt hình ảnh (Resize and crop images) là một kỹ thuật quan trọng nhằm mục đích tiết kiệm không gian và băng thông và nó cũng làm giảm thời gian thực hiện việc tải trang web của bạn lên nhiều lần. Cắt hình ảnh khi bạn muốn một phần cụ thể của một tấm hình để hiển thị như chỉ có bề mặt nổi bật nhất của nó. So sánh cả hai đều rất hữu ích và quan trọng trong kỹ thuật xử lý hình ảnh. Trong hướng dẫn này chúng tôi sẽ thay đổi kích thước và Cắt một hình ảnh Sử dụng PHP và jQuery.  

Để thay đổi kích thước (resize) và cắt (crop) hình ảnh chỉ mất ba bước sau:

  1. Tạo một file HTML và xác định mốc đánh dấu, các kịch bản khi người dùng di chuyển mốc cắt xén tại vịt trí tùy chọn
  2. Tạo một file PHP để thay đổi kích thước và cắt hình ảnh
  3. Tạo một file CSS và xác định phong cách, giao diện khi thay đổi kích thước và cắt xén

 

Bước 1. Tạo một tập tin HTML và xác định mốc đánh dấu, xác định kịch bản cho việc thay đổi kích cỡ và cắt xén.

 tạo một file HTML và lưu lại với một tên crop.html với nội trong code phía dưới

<!DOCTYPE html> <html> <head>   <link rel="stylesheet" type="text/css" href="crop_style.css">   <script type="text/javascript" src="jquery.js"></script>   <script type="text/javascript" src="jquery-ui.js"></script>   <script type="text/javascript">     $(function() {       $( "#crop_div" ).draggable({ containment: "parent" });     });         function crop()     {       var posi = document.getElementById('crop_div');       document.getElementById("top").value=posi.offsetTop;       document.getElementById("left").value=posi.offsetLeft;       document.getElementById("right").value=posi.offsetWidth;       document.getElementById("bottom").value=posi.offsetHeight;       return true;     }   </script> </head> <body> <div id="crop_wrapper">   <img src="images/image1.jpg">   <div id="crop_div">   </div> </div> <form method="post" action="do_crop.php" onsubmit="return crop();">   <input type="hidden" value="" id="top" name="top">   <input type="hidden" value="" id="left" name="left">   <input type="hidden" value="" id="right" name="right">   <input type="hidden" value="" id="bottom" name="bottom">   <input type="submit" name="crop_image"> </form> </body> </html>

Trước hết bạn cần phải tải về jQuery Ui Plugin để làm cho một div kéo được để người dùng có thể kéo các div và chọn phần mong muốn của một hình ảnh cho cropping.In bước này, chúng ta thực hiện hai div “crop_wrapper” mà là người chứa đựng hình ảnh và có khả năng kéo div và “crop_div” là div.We kéo làm một vụ chức năng () mà có được kích thước của hình ảnh và sau đó gửi tất cả các dữ liệu sau khi nộp mẫu đơn để do_crop.php tập tin để làm cắt xén.

 

Bước 2.Make một file PHP để thay đổi kích thước và cắt hình ảnh

Chúng tôi làm cho một file PHP tên do_crop.php

<?php if(isset($_POST['crop_image'])) {   $y1=$_POST['top'];   $x1=$_POST['left'];   $w=$_POST['right'];   $h=$_POST['bottom'];   $image="images/image1.jpg";   list( $width,$height ) = getimagesize( $image );   $newwidth = 600;   $newheight = 400;   $thumb = imagecreatetruecolor( $newwidth, $newheight );   $source = imagecreatefromjpeg($image);   imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);   imagejpeg($thumb,$image,100);    $im = imagecreatefromjpeg($image);   $dest = imagecreatetruecolor($w,$h);   imagecopyresampled($dest,$im,0,0,$x1,$y1,$w,$h,$w,$h);   imagejpeg($dest,"images/crop_image.jpg", 100); } ?>

Trong bước này, chúng tôi thay đổi kích thước và cắt hình ảnh sử dụng thư viện PHP GD và chúng tôi nhận được tất cả các kích thước của crop_div.We đầu tải hình ảnh từ thư mục mà bạn cũng có thể tạo ra một hình thức upload để tải lên hình ảnh nếu dont biết chúng tôi có một hướng dẫn về Làm thế nào để Tải lên ảnh và sau đó chúng tôi thay đổi kích thước hình ảnh để 600px 400px bởi vì chúng tôi xác định kích thước hình ảnh của 600px 400px bởi trong file CSS của chúng tôi bởi vì nếu hình ảnh là lớn hơn hoặc nhỏ hơn so với hình ảnh hiển thị của bạn sau đó bạn sẽ có được kích thước khác nhau từ crop_div.It là rất quan trọng để thay đổi kích thước hình ảnh với kích thước giống như hiển thị hình ảnh cho dù bạn tải lên một hình ảnh hoặc chỉ tải từ folder.And sau đó chúng tôi sử dụng imagecopyresampled function () và sau đó chúng tôi sử dụng imagejpeg () để tạo ra các hình ảnh được cắt và lưu lại với tên crop_image .jpg.

 

Bước 3.Make một tập tin CSS và xác định phong cách cho Thay đổi kích thước và cắt dán

Chúng tôi làm cho một tập tin CSS và lưu lại với tên crop_style.css

body { margin:0px; padding:0px; } #crop_wrapper { position:relative; margin-left:150px; margin-top:50px; width:600px; height:400px; } #crop_wrapper img { width:600px; height:400px; } #crop_div { width:300px; height:200px; border:1px dashed white; position:absolute; top:0px; box-sizing:border-box; }

Thats tất cả, đây là làm thế nào để thay đổi kích cỡ và Crop ảnh Sử dụng PHP và jQuery.You có thể tùy chỉnh mã này tiếp tục theo yêu cầu của bạn. Và vui lòng cho ý kiến ​​về bài viết này.