Вот сценарий js для обработки изображения jpeg с изменением размера на стороне клиента. Изменение размера обрабатывается, когда изображение загружается анонимной функцией обратного вызова, определенной в asynchronous
img.onload()
. Функция обратного вызова проверяет ширину и высоту загруженного изображения и изменяет размер, если он слишком велик. Проблема с приведенным ниже кодом заключается в том, что функция обратного вызова не вызывается, когда изображение загружается img.src = _URL.createObjectURL(f)
.Функция обратного вызова, не вызываемая в js
$('#uploaded_file_file_for_upload').change(function(){
var _URL = window.URL || window.webkitURL;
var img;
var max_width = 0;
var max_height = 0;
var max_size_mb;
var f = $(this)[0].files[0];
if (f != null) {
max_width = $('#max_width').val();
max_height = $('#max_height').val();
max_size_mb = $('#max_size_mb').val();
alert(max_width +', ' + max_height);
$('#file_name').val(f.name);
alert(f.name);
$('#file_size').val(f.size/1024);
$('#file_type').val(f.type); //image/jpeg
$('#file_extension').val(f.name.split('.').pop().toLowerCase());
alert(f.type);
alert(f.name.split('.').pop().toLowerCase());
if (f.type == 'image/jpeg') {
img = new Image();
img.onload(function(){
var w = this.width, h = this.height;
alert('hi-max' + max_width + ' -- ' + max_height);
alert('hi' + w + ' xx ' + h);
if (w > max_width || h > max_height) {
if (w > max_width){
h = Math.ceil(h * max_width/w);
w = max_width;
} else {
w = Math.ceil(w * max_height/h);
h = max_height;
};
alert('before resize, ' + w + ' ?? ' + h);
resize(this, w, h);
$('#remove').val('true');
};
});
img.src = _URL.createObjectURL(f);
};
};