Предварительный просмотр изображения Ajax с jQuery image cropper [blob url]

До сих пор я получил это так превью изображения работ, и вы можете нажать на предварительный просмотр и кадрирование изображения: http://codepen.io/anon/pen/oXmmEq?editors=101

Основная проблема у меня есть, что вы хотите, чтобы выбрать другое изображение, чтобы обрезать , Осталось прежнее изображение, которое вы выбрали ранее.

То, что я хотел бы это:

Чтобы не нажать на изображении, чтобы обрезать его и просто быть в состоянии обрезать его сразу же, когда он загружает
Уметь просмотреть другое изображение и обрезать его если пользователь допустил ошибку.

я понял, для 2 вы просто должны обернуть код изображения Кроппер в функции и сделать это:

function PreviewImage(no) { 
var oFReader = new FileReader(); 
oFReader.readAsDataURL(document.getElementById("uploadImage" + no).files[0]); 
oFReader.onload = function(oFREvent) { 
    cropperCode(); // Wraps around image cropper code. Called when oFReader loads. 
    document.getElementById("uploadPreview" + no).src = oFREvent.target.result; 
};

Редактировать Я только что заметил в cropper demo она имеет значок загрузки рядом нижний правый край изображения обрезается. Когда я парить над ней говорит «Импорт изображений с Blob URLS»

Я думаю, что это код:

// Import image 
var $inputImage = $('#inputImage'); 
var URL = window.URL || window.webkitURL; 
var blobURL; 

if (URL) { 
    $inputImage.change(function() { 
    var files = this.files; 
    var file; 

    if (!$image.data('cropper')) { 
     return; 
    } 

    if (files && files.length) { 
     file = files[0]; 

     if (/^image\/\w+$/.test(file.type)) { 
     blobURL = URL.createObjectURL(file); 
     $image.one('built.cropper', function() { 
      URL.revokeObjectURL(blobURL); // Revoke when load complete 
     }).cropper('reset').cropper('replace', blobURL); 
     $inputImage.val(''); 
     } else { 
     $body.tooltip('Please choose an image file.', 'warning'); 
     } 
    } 
    }); 
} else { 
    $inputImage.parent().remove(); 
}

Вот the new codepen try

Спасибо за любую помощь я могу получить.

источник

2015-08-10 user3325126

в первую очередь я тусклый, чтобы знать, что, когда будет изображение будет croped. ?? можете ли вы сказать это? –

Извините, Химс, я не уверен, что понимаю? Если вы спрашиваете, когда изображение обрезано, после выбора изображения для загрузки. Вы можете увидеть в примере codepen, который я показал. – user3325126

вы не указали полный код, где находится вызов отправки или вызов ajax. >? –

Мне нужно было добавить еще одну библиотеку jquery под названием tooltip.

codepen используется в редактирования будет работать, как только библиотека добавляется

источник

2015-08-11 00:04:30 user3325126

Предварительный просмотр изображения Ajax с jQuery image cropper [blob url]

ответ

Смежные вопросы