Wie kann ich das Bild mit den Croppie-Plugins auf eine Größe proportional zur angegebenen Größe zuschneiden?

Question

Ich arbeite an einem symfony-Projekt, bei dem ich Neuigkeiten mit einem Bild zeigen muss. Das Bild wird in 3 Teilen mit verschiedenen Takten angezeigt, eine in den Nachrichten mit normaler Größe (600x400px), eine andere in der Nachrichtenliste mit einer kleinen Größe (130x130px) und eine andere in der Notationsliste der rechteckigen Form (700x200px).

Die Bilder passen zu den verschiedenen Größen, aber das Problem ist, dass das rechteckige Bild mit geringer Höhe und viel Breite erscheint nur ein Teil des ursprünglichen Bildes und schneidet den Rest. So verwendet der Benutzer die Plugins, um das Bild in der richtigen Größe zu suchen und den sichtbaren Teil anzupassen, das Bild zu scrollen und die Plugins zu zoomen.

Also alles ist perfekt, das Problem, das ich habe, ist, dass ich das große Bild auf die beschriebene Größe zuschneiden will (600x400px), aber um mir das Plugin ein kleineres proportionales Bild zu zeigen, wenn es zum Trimmen kommt.

Das heißt, ich habe den folgenden Code das Plugin zu verwenden:

JAVASCRIPT

$uploadCrop = $('#upload-demo1').croppie({ 
    enableExif: true, 
    viewport: { 
     width: 600, 
     height: 400, 
     type: 'square' 
    }, 
    boundary: { 
     width: 700, 
     height: 500 
    } 
}); 

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


$('.upload-result').on('click', function (ev) { 
    $uploadCrop.croppie('result', { 
    type: 'canvas', 
    size: 'viewport', 
    format:'jpeg' 
    }).then(function (resp) { 
    $.ajax({ 
    url: Routing.generate('image_create'), 
    type: "POST", 
    data: {"image":resp}, 
    success: function (data) { 
     html = '<img src="' + resp + '" />'; 
     $("#upload-demo-i").html(html); 
    } 
    }); 
}); 
}); 

PHP

public function imagen_createAction() 
{ 
    $data = $_POST['image']; 
    list($type, $data) = explode(';', $data); 
    list(, $data)  = explode(',', $data); 
    $data = base64_decode($data); 
    $time=time(); 
    $imageName = $time.'-p.jpeg'; 
    $photoDir = $this->container->getParameter('kernel.root_dir').'/../web/uploads/news/'; 

    file_put_contents($photoDir.$imageName, $data); 

    return new JsonResponse(array(
     'message' => 'Success!', 
     'success' => true), 200); 
} 

Wo Sie eine Grenze von 700x500 sehen und der Rahmen für das Bild von 600x400, und speichern Sie es erstellt das zugeschnittene Bild dieser Größe. Aber ich habe nicht genug Platz, um diese Größe beim Bearbeiten (700x500) anzuzeigen, also würde ich gerne wissen, ob der Container mit einem proportionalen Maß angezeigt werden kann, so dass beim Erzeugen des Schnittbilds so wie ich 600x400 speichern möchte.

Ich bin neu, also schätze ich Ihre Hilfe.

Answer 1

Schließlich beschloss ich, dieses Problem durch eine Änderung:

Größe: 'Ansichtsfenster',

zu

Größe: {width: 700, height: 200},