Nick Reporter
	Description • 11 years ago

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

Steps to reproduce:

For my webpage (really is more of a web app), I make jquery requests to a tomcat servlet asking for a specific image.  The servlet replies with a string containing two jpeg images encoded as base64 and separated using a non-base64 inclusive character (this is so that I can parse and split the images).  Each image contains a shaped region.  One image contains the data I care about.  The other is the same image but just a "mask" - it is black where the image is and white where it is not.  Using, 

function createNewImage(imageString,maskString){
     var img = new Image();
     img.src = imageString;
     img.data-alpha-src = maskString;
     return img;
}
a single HTML object is created and passed to the following function.

function create_alpha_jpeg(img) {
    addElementToDiv(img, myDiv);   //Appends the created Image to a specified HTML div
    var alpha_path = img.getAttribute('data-alpha-src');
    if (!alpha_path)    //if the alpha doesnot exist
        return;

    // Hide the original un-alpha'd
    img.style.visiblity = 'hidden';

    // Preload the un-alpha'd image
    var image = new Image();
    image.src = img.src;

    image.onload = function () {

        // Then preload alpha mask
        var alpha = new Image();
        alpha.src = alpha_path;

        alpha.onload = function () {
            var canvas = document.createElement('canvas');
            size = getSensorPanelSize(meta);
            canvas.width = size[0];  // careful, use original's size in case there was scaling
            canvas.height = size[1];
            img.parentNode.replaceChild(canvas, img); //replaces the origional image with the new canvas

            // Canvas compositing code
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(alpha, 0, 0, canvas.width, canvas.height);
            context.globalCompositeOperation = 'source-in';
            context.drawImage(image, 0, 0, canvas.width, canvas.height);

        }
    }
}


Somewhere in this function Firefox throws "Image corrupt or truncated: data:image/jpeg;base64,<REALLY LONG BASE64 String>"  The best I can tell, is that occurs between the src attribute being set and the image actually being rendered - there is no line number associated with these particular errors.




Actual results:

Despite throwing the error, Firefox still draws both the image and then the canvas object(as it should).  Where this becomes a problem and ultimately a bug is when this is repeated in an extreme number of times.  My application makes on the order of 3,000 image requests to the server and each image(mask excluded because it is a tiny string) is 210,000+ characters.  When Firefox logs this error in both the web console and the Firefox "Error Console" it displays ALL 210,000+ characters and with it producing this error about 1 out of every 2 or 3 images all those characters begin to add up fast.

Additionally, there is no way to catch and discard this error(my problem and the purpose of this bug report). Logging millions of characters unnecessarily is a problem especially on mobile devices with limited memory to devote to error logging and actually causes the Firefox app to crash without warning.  I have tried surrounding the assignment of the image string to src with try catch.  I have executed a img.addEventListener("error", errorHandler, false); nothing will allow me to stop these errors from appearing.


Expected results:

Neither chrome, nor IE (latest versions of each) throw this error and as a result run smoother on mobile devices (specifically chrome).  I expected to be able to use a try-catch to prevent these accepted errors from logging or even a Firefox-specific function to prevent them from logging.


In summary: Firefox throws errors that (when the developer deems inconsequential) can not be caught and discarded and are ultimately inefficient.

	Boris Zbarsky [:bzbarsky]
	Comment 1 • 11 years ago

This isn't a JS exception, which is why you can't catch it.  It's being logged directly to the console by imagelib....

	Nick Reporter
	Comment 2 • 11 years ago

(In reply to Boris Zbarsky (:bz) (reading mail, but on paternity leave) from comment #1)
> This isn't a JS exception, which is why you can't catch it.  It's being
> logged directly to the console by imagelib....

Then how do I prevent imagelib from logging the error?  Or at minimum, how could I flush its log every so often?

	Boris Zbarsky [:bzbarsky]
	Comment 3 • 11 years ago

You can prevent it by having valid image data, unless there's an imagelib bug here that makes it think that valid data is in fact invalid...