Comment est-ce que je devrais recadrer l'image du côté du client en utilisant jcrop et le télécharger?

Ce que je suis en train de faire est de sélectionner l'image à l'aide de html contrôle fileupload, la récolte de la sélection à l'aide de jcrop, rogner l'image à côté client et charger l'image. Voici le violon lien https://jsfiddle.net/govi20/spmc7ymp/

Du code utilisé dans le code:

cible pour jcrop image
photographie contrôle fileupload
aperçu toile aperçu
clear_selection le bouton effacer la zone sélectionnée

de la configuration de l'jcrop.

<script type="text/javascript">
jQuery(function($){

var api;

$('#target').Jcrop({
  //start off with jcrop-light class
  bgOpacity: 0.5,
  keySupport: false,
  bgColor: 'black',
  minSize:[240,320],
  maxSize:[480,640],
  onChange : updatePreview,
  onSelect : updatePreview, 
  height:160,
  width:120,
  addClass: 'jcrop-normal'
},function(){
  api = this;
  api.setSelect([0,0,240,320]);
  api.setOptions({ bgFade: true });
  api.ui.selection.addClass('jcrop-selection');
  });

});

pour la compensation de la sélection.

 jQuery('#clear_selection').click(function(){
  $('#target').Jcrop({    

      setSelect: [0,0,0,0],
    });
});

pour afficher le fichier téléchargé dans jcrop

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
            setProperties();       
        }
        reader.readAsDataURL(input.files[0]);
    }
}

 function setProperties(){
   $('#target').Jcrop({         
              setSelect: [0,0,240,320]
        }); 
 }
 $("#photograph").change(function(){
    readURL(this);     
  });

pour recadrer l'image et de l'attribuer à la toile(got ce à partir de l'un des threads sur stackoverflow)

function make_base() {
    console.log("make_base called");
    var base_image = new Image();
    base_image.src = '';
    base_image.onload = function () {
        context.drawImage(base_image, 0, 0);
    }
}

var canvas = document.getElementById('preview'),
context = canvas.getContext('2d');

make_base();
function updatePreview(c) {
    console.log("called");
    if(parseInt(c.w) > 0) {
        //Show image preview
        var imageObj = $("#target")[0];
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
    }
};

Questions, je suis confronté:

updatePreview fonction n'est pas appelée sur la sélection, donc pas de toile est visible.
sélection de la récolte n'est pas déplaçable (je suis en utilisant bootstrap css).
Toile est l'élément HTML5, cela signifie que le client devrait html5 compatible navigateur, alors comment puis-je supprimer cette condition.

source d'informationauteur Pablo Escobar

Seahorsepip la réponse est fantastique. J'ai fait beaucoup d'améliorations sur la non-secours réponse.

http://jsfiddle.net/w1Lh4w2t/

Je recommanderais de ne pas faire de cet étrange caché png chose, quand un objet Image fonctionne tout aussi bien (tant que nous ne sommes pas de soutien de base).

var jcrop_api;
var canvas;
var context;
var image;
var prefsize;

Bien que, même alors, nous sommes, vous êtes mieux de faire que les données de la toile à la fin et de le mettre dans ce champ qu'à la fin.

function loadImage(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      image = new Image();
      image.src = e.target.result;
      validateImage();
    }
    reader.readAsDataURL(input.files[0]);
  }
}

Mais, si vous voulez plus de fonctions que juste de la récolte, si nous accordons la jcrop pour insérer le canevas (qui nous détruire avec la jcrop lors de l'actualisation). Nous pouvons facilement faire tout ce qu'on peut faire avec une toile, puis validateImage() et d'avoir la mise à jour de l'image visible.

function validateImage() {
  if (canvas != null) {
    image = new Image();
    image.src = canvas.toDataURL('image/png');
  }
  if (jcrop_api != null) {
    jcrop_api.destroy();
  }
  $("#views").empty();
  $("#views").append("<canvas id=\"canvas\">");
  canvas = $("#canvas")[0];
  context = canvas.getContext("2d");
  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0);
  $("#canvas").Jcrop({
    onSelect: selectcanvas,
    onRelease: clearcanvas,
    boxWidth: crop_max_width,
    boxHeight: crop_max_height
  }, function() {
    jcrop_api = this;
  });
  clearcanvas();
}

Ensuite sur "soumettre" nous soumettre toutes les opérations en cours, comme applyCrop() ou applyScale(), l'ajout de données dans des champs cachés de secours choses, si nous avons ces choses nécessaires. Nous avons alors un système, nous pouvons facilement modifier la toile, en quelque sorte, alors quand nous présenter le canevas de données est envoyé correctement.

function applyCrop() {
  canvas.width = prefsize.w;
  canvas.height = prefsize.h;
  context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
  validateImage();
}

La toile est ajouté à un div vues.

 <div id="views"></div>

Pour attraper le fichier joint en PHP (drupal), j'ai utilisé quelque chose comme:

    function makeFileManaged() {
        if (!isset($_FILES['croppedfile']))
            return NULL;
        $path = $_FILES['croppedfile']['tmp_name'];
        if (!file_exists($path))
            return NULL;
        $result_filename = $_FILES['croppedfile']['name'];
        $uri = file_unmanaged_move($path, 'private://' . $result_filename, FILE_EXISTS_RENAME);
        if ($uri == FALSE)
            return NULL;
        $file = File::Create([
                    'uri' => $uri,
        ]);
        $file->save();
        return $file->id();
    }

17

Ici de base du code html 5:

https://jsfiddle.net/zm7e0jev/

Ce code cultures de l'image, montre un aperçu et définit la valeur d'un élément d'entrée de la base64 recadrée de l'image.

Vous pouvez récupérer le fichier d'image en php de la manière suivante:
```
//File destination
$destination = "/folder/cropped_image.png";
//Get convertable base64 image string
$image_base64 = $_POST["png"];
$image_base64 = str_replace("data:image/png;base64,", "", $image_base64);
$image_base64 = str_replace(" ", "+", $image_base64);
//Convert base64 string to image data
$image = base64_decode($image_base64);
//Save image to final destination
file_put_contents($destination, $image);
```
Soumettre base64 chaîne d'image comme une variable post a serveur post les limites de taille et de l'encodage base64 rend l'image recadrée fichier de taille encore plus grande (~33%), puis les données brutes de l'image recadrée serait ce qui rend le téléchargement de prendre encore plus de temps.

Pour définir le poste de limite de taille: Quelle est la taille limite d'une demande post?

Garder à l'esprit qu'une augmentation de la post limite de taille peut être utilisé pour une attaque par déni de service à titre d'exemple.

Au lieu de cela, je suggère de conversion de la base64 recadrée de l'image d'un blob de données, puis l'ajouter à la forme sur de soumettre un fichier:

https://jsfiddle.net/g3ysk6sf/

Ensuite, vous pouvez récupérer le fichier d'image en php de la manière suivante:
```
//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it's temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);
```
Mise à jour:

FormData() n'est que partiellement soutien dans IE10 et non pris en charge dans les anciennes versions d'IE

Je suggère donc de l'envoi de la chaîne base64 comme un secours, cela va provoquer des problèmes avec les images plus grandes de sorte qu'il est nécessaire de vérifier la taille du fichier et d'afficher une popup d'erreur lorsque l'image est au-dessus d'une taille spécifique.

Je vais poster une mise à jour avec le secours de code ci-dessous lorsque j'ai eu à travailler.

Mise à jour 2:

J'ai ajouté une solution de repli pour IE10 et ci-dessous:

https://jsfiddle.net/oupxo3pu/

La seule limite est la taille de l'image qui peut être soumis lors de l'utilisation d'IE10 et ci-dessous, dans le cas où la taille de l'image est trop grande le code js lèvera une erreur. La taille maximale de travail pour les valeurs post est différent entre chaque serveur, le code js a une variable pour définir la taille maximale.

Le code php ci-dessous est adapté pour travailler avec au-dessus de secours:
```
//File destination
$destination = "/folder/cropped_image.png";
if($_POST["png"]) {//IE10 and below
    //Get convertable base64 image string
    $image_base64 = $_POST["png"];
    $image_base64 = str_replace("data:image/png;base64,", "", $image_base64);
    $image_base64 = str_replace(" ", "+", $image_base64);
    //Convert base64 string to image data
    $image = base64_decode($image_base64);
    //Save image to final destination
    file_put_contents($destination, $image);
} else if($_FILES["cropped_image"]) {//IE11+ and modern browsers
    //Get uploaded image file it's temporary name
    $image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
    //Move temporary file to final destination
    move_uploaded_file($image_tmp_name, $destination);
}
```
Il n'y a pas de repli du code de l'élément canvas pourtant, je suis à la recherche en elle.

Le poste de limite de taille dans la solution de repli pour les navigateurs plus anciens, est l'une des raisons pour lesquelles j'ai abandonné le soutien pour les anciens navigateurs moi-même.

Mise à jour 3:

Le secours que je recommande pour l'élément canvas dans IE8:

http://flashcanvas.net/

Il prend en charge tous les canevas des fonctions de recadrage code des besoins.

Garder à l'esprit qu'il exige flash. Il y a une toile de secours (explorercanvas de façon) qui ne nécessite pas de flash, mais il ne prend pas en charge la fonction toDataURL() dont nous avons besoin pour sauver notre image recadrée.

Vous devez vous connecter pour publier un commentaire.