نمایش نتایج 1 تا 10 از 10

نام تاپیک: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

  1. #1
    کاربر دائمی آواتار khorsandreza
    تاریخ عضویت
    شهریور 1387
    محل زندگی
    تبریز
    پست
    776

    تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    سلام :
    من در حین کار در یک سایت به موضوع جدید برخورد کردم در آن قبل از آپلود تصویر به سرور تصویر را نمایش و امکان برش تصویر و تغییر اندازه آن را مهیا میساخت روش کار را بصورت تصویر برای دوستان (البته بصورت فشرده) ارسال کردم
    1 تضویر انتخاب میشود
    2 تصویر بطور کامل قبل از ارسال به سرور نمایش داده میشود و بخشی که رنگ روشنتری را دارد که می توانید تغییر اندازه بدهید
    3 تصویر بلوک شده به سرور ارسال میشود و بعد از ارسال به سرور نمایش داده میشود
    دوستان اگر نظر خاصی و یا مقاله ای دارند دریغ نفرمایند
    فایل های ضمیمه فایل های ضمیمه
    • نوع فایل: rar 1.rar‏ (226.8 کیلوبایت, 61 دیدار)

  2. #2

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    jQuery از اين پلاگين ها زياد داره.
    فكر ميكنم كل عكس به همراه مختصات و سايز Crop به سرور ارسال ميشه و اونجا با يه كد ساده، اين تصوير رو كراپ ميكنه.
    بهترين نمونه اي كه ديدم jCrop هستش :

    http://deepliquid.com/content/Jcrop.html
    آخرین ویرایش به وسیله bahman_akbarzadeh : سه شنبه 08 دی 1388 در 00:45 صبح

  3. #3

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    نقل قول نوشته شده توسط bahman_akbarzadeh مشاهده تاپیک
    jQuery از اين پلاگين ها زياد داره.
    فكر ميكنم كل عكس به همراه مختصات و سايز Crop به سرور ارسال ميشه و اونجا با يه كد ساده، اين تصوير رو كراپ ميكنه.
    بهترين نمونه اي كه ديدم jCrop هستش :

    http://deepliquid.com/content/Jcrop.html
    جي كوئري Client Side هست

  4. #4
    کاربر دائمی آواتار khorsandreza
    تاریخ عضویت
    شهریور 1387
    محل زندگی
    تبریز
    پست
    776

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    نقل قول نوشته شده توسط bahman_akbarzadeh مشاهده تاپیک
    jQuery از اين پلاگين ها زياد داره.
    فكر ميكنم كل عكس به همراه مختصات و سايز Crop به سرور ارسال ميشه و اونجا با يه كد ساده، اين تصوير رو كراپ ميكنه.
    بهترين نمونه اي كه ديدم jCrop هستش :

    http://deepliquid.com/content/Jcrop.html
    من تست کردم فایل بزرگ را امتحان کردم بلافاصله نمایش داد اگر به سمت سرور ارسال میشد زمان زیادی میخواست هم برای ارسال و بارگذاری مجدد
    اینکه از روی کلایت نمایش میده برام جالبه

  5. #5
    کاربر دائمی آواتار khorsandreza
    تاریخ عضویت
    شهریور 1387
    محل زندگی
    تبریز
    پست
    776

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    سلام:
    یک مورد نسبتا خوبی را پیدا کردم به همراه سورس و مثال برای استفاده دوستان در اینجا اپلود کردم جهت استفاده دوستان
    فایل های ضمیمه فایل های ضمیمه

  6. #6

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    سلام دوستان
    من با این پلاگین داشتم کار میکردم که متوجه شدم در حالت موبایل و یا همون half screen مختصات درست منتقل نمیکنه و عکس درست برش داده نمیشه.
    توی فروم های خارجی سرچ زدم و تنها کدی که پیشنهاد دادن کد زیر که اونم فقط در حالت full screen درست جواب میده.
             img { max-width: 100% }

    کسی تجربه ای داره در این خصوص؟

  7. #7
    کاربر دائمی آواتار علیرضا5
    تاریخ عضویت
    اردیبهشت 1394
    محل زندگی
    همدان
    پست
    506

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    این بهتر کار میکنه
    منتهی من خودم نمی تونم ویرایشش بکنم

    من میخوام یه اندازه مثلا 600 در 600 رئ خودش به صورت پیش فرض هنگتم آپلود انتخاب بکنه
    فایل های ضمیمه فایل های ضمیمه

  8. #8

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    ممنون علیرضا جان
    ناچار شدم پلاگین عوض کنم و از cropper.js استفاده کنم و بااستفاده از base64 تصویر بخونم
    پیچیده بود ولی بعد از سه روز کد نویسی شد
    ممنون که بالاخره یکی پاسخ داد

  9. #9

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    سه روز کدنویسی نمیخواست ! کافی بود نیم ساعت سرچ بزنی :

    <html lang="en">
    <head>
    <title>PHP and jQuery - Crop Image and Upload using Croppie plugin</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>

    <body>
    <div class="container">
    <div class="card" style="max-height: 500px;">
    <div class="card-header bg-info">PHP and jQuery - Crop Image and Upload using Croppie plugin</div>
    <div class="card-body">

    <div class="row">
    <div class="col-md-4 text-center">
    <div id="upload-demo"></div>
    </div>
    <div class="col-md-4" style="padding:5%;">
    <strong>Select image to crop:</strong>
    <input type="file" id="image">

    <button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button>
    </div>

    <div class="col-md-4">
    <div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>
    </div>
    </div>

    </div>
    </div>
    </div>


    <script type="text/javascript">


    var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,
    viewport: { // Default { width: 100, height: 100, type: 'square' }
    width: 200,
    height: 200,
    type: 'circle' //square
    },
    boundary: {
    width: 300,
    height: 300
    }
    });


    $('#image').on('change', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
    resize.croppie('bind',{
    url: e.target.result
    }).then(function(){
    console.log('jQuery bind complete');
    });
    }
    reader.readAsDataURL(this.files[0]);
    });


    $('.btn-upload-image').on('click', function (ev) {
    resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
    }).then(function (img) {
    $.ajax({
    url: "croppie.php",
    type: "POST",
    data: {"image":img},
    success: function (data) {
    html = '<img src="' + img + '" />';
    $("#preview-crop-image").html(html);
    }
    });
    });
    });


    </script>


    </body>
    </html>

  10. #10

    نقل قول: تغییر اندازه تصویر و نمایش آن قبل از ارسال به سرور

    بهترش کردم :


    <html lang="en">

    <head>
    <title>jQuery - Crop Image and Upload using Croppie plugin</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>

    <body>
    <div class="container">
    <div class="card" style="max-height: 500px;">
    <div class="card-header bg-info">jQuery - Crop Image and Upload using Croppie plugin</div>
    <div class="card-body">

    <div class="row">
    <div class="col-md-4 text-center">
    <div id="upload-demo"></div>
    </div>
    <div class="col-md-4" style="padding:5%;">
    <strong>Select image to crop:</strong>
    <input type="file" id="image">

    <button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button>
    <hr>
    <button id="chkimg" class="btn btn-warning btn-block " style="margin-top:2%">Crop Image</button>
    <img id="testimg" />
    </div>

    <div class="col-md-4">
    <div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>
    </div>
    </div>

    </div>
    </div>
    </div>


    <script type="text/javascript">
    var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,
    viewport: { // Default { width: 100, height: 100, type: 'square' }
    width: 200,
    height: 200,
    type: 'square' //square
    },
    boundary: {
    width: 300,
    height: 300
    }
    });


    $('#image').on('change', function() {
    var reader = new FileReader();
    reader.onload = function(e) {
    resize.croppie('bind', {
    url: e.target.result
    }).then(function() {
    console.log('jQuery bind complete');
    Ftestimg();
    });
    }
    reader.readAsDataURL(this.files[0]);
    Ftestimg();
    });

    function Ftestimg() {
    resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
    }).then(function(img) {
    console.log(img);

    $("#testimg").attr("src", img);
    });
    }
    $('#chkimg').on('click', function(ev) {
    console.log('chkimg');

    Ftestimg();
    });


    $('.btn-upload-image').on('click', function(ev) {

    resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
    }).then(function(img) {
    $.ajax({
    url: "croppie.php",
    type: "POST",
    data: {
    "image": img
    },
    success: function(data) {
    html = '<img src="' + img + '" />';
    $("#preview-crop-image").html(html);
    }
    });
    });
    });
    </script>


    </body>

    </html>

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •