HTML5 subsiguiente CreateObjectURL blob image vista previa y recorte error de carga

Question

Estoy tratando de averiguar si mi código es el culpable o la implementación actual de la API de archivos HTML5.

El código debajo de funciona. El error aparece cuando se repite el proceso después de haber cargado la imagen una vez.

La segunda vez que se selecciona un archivo, el blob de imagen se carga, luego aparece un parpadeo y la imagen desaparece. Las selecciones posteriores después de eso generalmente funcionan bien (a veces hay un comportamiento errático si el archivo es grande). La repetición del proceso para la misma selección de archivos generalmente funciona (como solución).

Cualquier ayuda sería muy apreciada.

bibliotecas JavaScript utilizan

• jQuery 1.7.1

• JQuery Herramientas 1.2.6

• JCrop 0.9.9

Pasos - Summ ary

1. El usuario selecciona un archivo a través del tradicional diálogo <input type="file" /> .

2. Un controlador de onchange realiza para la entrada y comprueba si un archivo se seleccionado, si es así, entonces verifica que el tipo MIME es image/jpeg o imagen/png y que el tamaño del archivo seleccionado es menor que 250KB. Si esta validación falla, restablece la selección.

3. En este punto, el archivo (imagen) que se va a cargar es válido. Siguiente comprueba si el navegador es compatible con la API de archivos a través CreateObjectURL if (typeof window.URL == 'undefined') return; (si no lo hace, se salta los próximos pasos)

4. carga la burbuja imagen en la vista previa de imagen actual (uno usó para mostrar la corriente imagen) y también en un elemento de imagen generado dinámicamente que se agrega a la superposición de herramientas jquery con jcrop funcionalidad de recorte.

5. Entonces, el usuario recorta la imagen a través de jcrop y cierra la superposición, ver la vista previa recortada de la imagen que va a cargar (sólo si el navegador apoya CreateObjectURL y el usuario recorte de la imagen)

El Código

El HTML

<div style="height: 100px; overflow: hidden; width: 100px; margin-bottom: 5px;"> 
    <img id="PhotoPreview" alt="Photo" src="/Content/no-photo.png" /> 
</div> 
<input type="file" id="Photo" name="Photo" onchange="photoChanged(this.files)" /> 
<input type="hidden" id="PhotoCrop" name="PhotoCrop" value="" /> 

El JavaScript window.URL = window.URL || ventana.webkitURL;

function photoChanged(files) { 
    if (!files.length) return; 
    var file = files[0]; 
    if (file.type != 'image/jpeg' && file.type != 'image/png') { 
     alert('The photo must be in PNG or JPEG format'); 
     $("#Photo").val(''); 
     return; 
    } 
    var fileSizeLimit = 250; 
    var fileSize = file.size/1024; 
    if (fileSize > fileSizeLimit) { 
     var fileSizeString = fileSize > 1024 ? (fileSize/1024).toFixed(2) + "MB" : (fileSize).toFixed(2) + "KB"; 
     alert("The photo file size is too large, maximum size is " + fileSizeLimit 
       + "KB. This photos' file size is: " + fileSizeString); 
     $("#Photo").val(''); 
     return; 
    } 

    if (typeof window.URL == 'undefined') return; 

    var preview = document.getElementById('PhotoPreview'); 
    $(preview).removeClass('profile-photo'); 
    preview.src = window.URL.createObjectURL(file); 
    preview.onload = function() { 
     var img = new Image(); 
     $("#PhotoOverlay div").empty().append(img); 
     window.URL.revokeObjectURL(this.src); 
     img.src = window.URL.createObjectURL(file); 
     img.onload = function() { 
      window.URL.revokeObjectURL(this.src); 
      $(this).Jcrop({ 
       onSelect: onImageCropSelect, 
       aspectRatio: 
       310/240, 
       minSize: [100, 100], 
       setSelect: [0, 0, 100, 100] 
     }); 

     $("#PhotoOverlay") 
      .css({ width: this.width + 'px', : 'auto'}) 
      .overlay() 
      .load(); 
     }; 
    }; 
} 

function onImageCropSelect(e) { 
    $("#PhotoCrop").val(e.x + ',' + e.y + ',' + .x2 + ',' + e.y2); 

    var rx = 100/e.w; 
    var ry = 100/e.h; 

    var height = $("#PhotoOverlay div img").height(); 
    var width = $("#PhotoOverlay div img").width(); 

    jQuery('#PhotoPreview').css({ 
     width: Math.round(rx * width) + 'px', 
     height: Math.round(ry * height) + 'px', 
     marginLeft: '-' + Math.round(rx * e.x) + 'px', 
     marginTop: '-' + Math.round(ry * e.y) + 'px' 
    }); 
} 

$(function() { 
    $("#PhotoOverlay").overlay({ 
     mask: { 
      color: '#ebecff', 
      loadSpeed: 200, 
      opacity: 0.9 
     } 
    }); 
}); 

Siéntase libre de utilizar el código (mi contribución para cualquier ayuda recibida aquí).

actualización

me he encontrado con otra pregunta sobre stackoverflow con respecto a un problema similar (la carga de imágenes para luego desaparecer) en lo que respecta a la utilización de JCrop. Actualmente estoy apostando a que JCrop es el culpable.

También he leído que cuando img.onload se ejecuta la imagen no siempre está 'lista', por lo tanto, el extraño comportamiento y las comprobaciones adicionales a .actualWidth/.actualHeight con un setTimeout podrían resolver el problema. Lo investigaré.

actualización

tengo una prueba de concepto de trabajo utilizando un FileReader y readAsDataUrl lugar de utilizar el CreateObjectURL y usando un lienzo para dibujar una vista previa en lugar de un desbordamiento de margen basado en: solución oculta. Necesita un refinamiento y luego publicaré el código aquí.

Answer 1

comportamiento a menudo irregular se produce cuando se establece img.src antes de declarar img.onload

function imageLoadHandler() { ... } 

var img = new Image(); 
img.onload = function() { imageLoadHandler() } 
img.src = window.URL.createObjectURL(file); 
if(img.complete) { imageLoadHandler() } //fix for browsers that don't trigger .load() event with image in cache 

esperanza esto ayuda