اصفهان - گلپایگان - میدان بسیج - مجتمع تجاری پارسیان - طبقه اول انتهای راهرو خدمات ژوپین پ 136
031-57453161   09130246374   @ info[at]zhupin[dot]ir  



برش تصاویر قبل از آپلود توسط جی کوئری و php


برش تصاویر قبل از آپلود توسط جی کوئری و php

شاید شما نیاز داشته باشید تا به انتخاب کاربر آواتار یا تصویر وی را برش بزنید ، خوب برای این کار باید ابزاری سمت کلاینت وجود داشته باشد تا برش را به صورت نمایشی نشان دهد و سپس مقادیر و پوزیشن های برش یا کراپ به php ارسال شود.

 

خوب ابتدا پلاگین جی کوئری زیر را دانلود کنید

http://deepliquid.com/content/Jcrop_Download.html

خوب ما در اینجا فقط به فایل jquery.Jcrop.js نیاز داریم پس فراخوانی میکنیم . البته کتابخانه جکوئری هم لازم داریم که پس از دانلود از اینجا  با توجه با نامش اینکلود میکنید

<script type="text/javascript" src="path/to/jquery.js" ></script>
<script type="text/javascript" src="path/to/jquery.Jcrop.js" ></script>

در کد بالا مسیر ها را با توجه به نیاز خود و یا سیستم سایت خودتون عوض کنید.

 

خوب حالا یک فایل دیالوگ در html ایجاد میکنیم.

 

<form action="" method="post">
<input value="" onchange="readinputfile(this,'#avatar_3')" name="avatar"  type="file"  acceptc="image/gif, image/jpeg, image/png" class=""  id="form_avatar" placeholder="آواتار">
<br>

<div class="" id="avatar_3">

</div>


</form>

خوب در رویداد onchange یک تابع را صدا زدیم پس تابع رو نیز در یک فایل جدای js یا اینلاین مثل زیر اضافه میکنیم

 

<script>
function readinputfile(input,dv) {
        if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
              
                var image = new Image();
    image.src = e.target.result;
    image.onload = function(e) {
        // access image size here 
var w = this.width;
var h = this.height;
if(w<200 || h<200){
alert('تصویر کوچک است');
$(input).val(null);
return false;
}
$(dv).width( Math.round($(dv).width()) );

var z = w/$(dv).width(); 

z = Math.round(z);
if(z>0){
$(dv).width( w/z );
}
var new_w = w > $(dv).width() ? $(dv).width() : w;
var new_h = Math.round(h/(w/new_w));      
        
        var img = '<img id="avatar_reg_img" src="'+this.src+'"  class="" width="'+new_w+'" height="'+new_h+'" />';
 img +='<input type="hidden" name="avatar_x1" id="avatar_x1" />';
 img +='<input type="hidden" name="avatar_x2" id="avatar_x2" />';
 img +='<input type="hidden" name="avatar_y1" id="avatar_y1" />';
 img +='<input type="hidden" name="avatar_y2" id="avatar_y2" />';
 img +='<input type="hidden" name="avatar_w" id="avatar_w" />';
 img +='<input type="hidden" name="avatar_h" id="avatar_h" />';
 img +='<input type="hidden" name="avatar_wm" value="'+ new_w +'" id="avatar_wm" />';
 img +='<input type="hidden" name="avatar_hm" value="'+ new_h +'" id="avatar_hm" />';
$('#avatar_reg_img').addClass("img img-responsive img-rounded img-thumbnail img-bordered");
        $(dv).html(img);
    $("#avatar_reg_img").Jcrop({
		onChange: cropPreview,
		onSelect: cropPreview,
		aspectRatio: 1,
 setSelect: [0,0,200,200],
		aspectRatio: 200/200,
allowResize: true,
minSize: [ 200, 200 ],
//maxSize: [ 200, 200 ]
		
	});
	
   }
   
   
    };
    
    
                   

               reader.readAsDataURL(input.files[0])
       
        }
        
    }

function cropPreview(c)
{
	$('#avatar_x1').val(c.x);
	$('#avatar_y1').val(c.y);
	$('#avatar_x2').val(c.x2);
	$('#avatar_y2').val(c.y2);
	$('#avatar_w').val(c.w);
	$('#avatar_h').val(c.h);


}



</script>

 

حال به محض انتخاب عکس میتوان کراپ کرد .

دکمه ای هم برای سابمیت فرم قرار میدهیم تا با زدن آن به یه فایل php ارجاع داده شود که توسط توابع gd2 و مقادیر ارسالی برش طبق زیر برش را انجام و عکس را ذخیره کرد

 

$_POST['avatar_w'] ; ///کل عرض برش خورده///
$_POST['avatar_h'] ; ///کل ارتفاع برش خورده///
$_POST['avatar_x1'] ; ///نقطه سمت چپ عرضی///
$_POST['avatar_x2'] ; ///نقطه سمت راست عرضی///
$_POST['avatar_y1'] ; ///نقطه سمت چپ طولی///
$_POST['avatar_y2'] ; ///نقطه سمت راست طولی///

 


1396/02/25 20:47:40      طراحی سایت    825 بار    اشتراک در تلگرام    http://www.zhupin.ir/post/18

نظرات

دیدگاهی یافت نشد

کد امنیتی :

پایتخت ایران؟