Problem with distorted images upon upload

[Guest]

I've inherited a "Custom Card Builder". Basically this is a feature for loyalty customers. They can upload their own images to be the face of their gift cards, and/or business loyalty cards.

The problem occurs when they upload an image and resize it or skew it or spin it. The image looks fine while in the card builder, but once it gets downloaded to our database it gets distorted. I've attached a copy of a distorted image.

You can see the distorted image on the bottom left corner. This is the image that gets sent to our printer.

I'm hoping somebody can guide me in the right direction to find what could be the cause of this problem.

I'm using Flash CS6 Version 12.0.2.529 on a Mac OS X version 10.8.3.

Looking forward to hearing your replies ...

[kglad]

what's it look like in the card builder and what code is used to save it to your database?

[Guest]

Would you like to see all the code?

[kglad]

negative.  only the relevant code and the image the user is trying to save.

[Guest]

kglad,

I'm trying to paste in the code but I keep getting a wierdly formatted table, which is mesing everything up. Can you suggest a way around that?

[kglad]

you can click the html toggle (upper right of the message panel) and use code tags.

[Guest]

<code>

/*****[ FUNCTIONS: Custom Image Related Tools                          ]************************************/

function cancelAddImage(e:Event):void{

    userUploadedImage.cancel();

    loaderLayer.visible = false;

}

//User presses the Browse button - fires the uploadImage() function after the file is selected

function addImage(e:Event):void {

    deselect();

    //Declare a file object and add it's listener

    userUploadedImage = new FileReference();

    //Declare event listeners

    userUploadedImage.addEventListener(Event.SELECT, uploadUserImage);

    //Select the file

    userUploadedImage.browse(imageTypes);

    //When it's selected, upload it to the server

    function uploadUserImage(e:Event):void {

        loaderLayer.visible = true;

        clearUpload();

        var fr:FileReference = e.target as FileReference;

        var pRequest:URLRequest = getURLRequest();

        var pVars:URLVariables = new URLVariables();  //Stores the post and return responses

        fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadComplete);

        fs = fr.size;

        //Setup the loader's variables

        pVars._FUNCTION_ = "upload";

        pVars.card_image_id = cardImageID; //Add the current selected template_id to the post string

        //Setup POST method

        pRequest.method = URLRequestMethod.POST;

        pRequest.data = pVars;

        //upload the request

        fr.upload(pRequest, "user_image");

        gcPreview.mcUpload.addEventListener(MouseEvent.MOUSE_DOWN, select);

        //After it's uploaded, download it back and it to the stage.

        function uploadComplete(e:DataEvent):void {

            fr.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadComplete);

            var ldr:Loader = new Loader();

            ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, downloadComplete);

            var req:URLRequest = getURLRequest("_FUNCTION_:upload_display+upload_index:"+e.data.substr(13,1));

            ldr.load(req);

            function downloadComplete(e:Event):void {

                var bit:Bitmap = new Bitmap;

                bit.name = "userImage";

                if (validateImage(ldr.width, ldr.height, fs)) {

                    //clearBackground();

                    clearUpload();

                    bit = Bitmap(ldr.content);

                    bit.smoothing = true;

                    var mc:MovieClip = gcPreview.mcUpload;

                    mc.addChild(bit);

                    //Scale the image if necessary

                    if (mc.height > 270) {

                        mc.height = 270;

                        /*mc.y = mc.height/2;   

                        mc.y = 1;*/

                    } else if (mc.width > 430) {

                        mc.width = 430;

                        /*mc.x = 1;

                        mc.y = mc.height/2;    */       

                    } else {

                        /*mc.x = mc.width/2;

                        mc.y = mc.height/2;*/

                    }

                    if(MothersFrame){

                        mc.x = 105;

                        mc.y = 25;

                        /*mc.x = 216;

                        mc.y = 100;

                    }else{

                            mc.x = 105;

                            mc.y = 25;

                            /*mc.x = 216;

                            mc.y = 100;

                        }

                    (mc.scaleX < mc.scaleY ) ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;

                    loaderLayer.visible = false;

                    showStep("1c");

                    ldr.contentLoaderInfo.removeEventListener(Event.COMPLETE, downloadComplete);

                }

            }

        }

    }

}

/*****[ FUNCTIONS: Processes the final upload                          ]*****************************************/

function doUpload(e:MouseEvent):void {

    deselect();

    //if (checkStep2()) {

        step3.btnFinalize.mouseEnabled = false;

        step3.btnBack.mouseEnabled = false;

        var jpgEncoder:JPGEncoder = new JPGEncoder(100);  //Create the encoder set img quality

        var srcFinal:BitmapData = new BitmapData(1813,1129);

        var srcPreview:BitmapData = new BitmapData(435,271);   

        srcPreview.draw(gcPreview);  //Write the movieclip to the Bitmap Data object

        // Clear printer movie clip.

        while (toPrinter.numChildren > 0) {

            toPrinter.removeChildAt(0);

        }

        gcPreview.mcPattern.scaleX = 1;

        gcPreview.mcPattern.scaleY = 1;

        gcPreview.mcFrame.scaleX = 1;

        gcPreview.mcFrame.scaleY = 1;

        gcPreview.mcText.width = gcPreview.mcText.width * scaleWidth;

        gcPreview.mcText.height = gcPreview.mcText.height * scaleHeight;

        gcPreview.mcUpload.width = gcPreview.mcUpload.width * scaleWidth;

        gcPreview.mcUpload.height =gcPreview.mcUpload.height * scaleHeight;

        gcPreview.mcText.x =  gcPreview.mcText.x * scaleWidth;

        gcPreview.mcText.y =  gcPreview.mcText.y * scaleHeight;

        gcPreview.mcUpload.x =  gcPreview.mcUpload.x * scaleWidth;

        gcPreview.mcUpload.y =  gcPreview.mcUpload.y * scaleHeight;

        gcPreview.mcFrame.x =  gcPreview.mcFrame.x * scaleWidth;

        gcPreview.mcFrame.y =  gcPreview.mcFrame.y * scaleHeight;

        // Add background pattern, uploaded image, and text.

        toPrinter.addChild(gcPreview.mcPattern);

        toPrinter.addChild(gcPreview.mcUpload);

        toPrinter.addChild(gcPreview.mcFrame);

        toPrinter.addChild(gcPreview.mcText);

        if(gcPreview.test_logo.visible){

            gcPreview.test_logo.x =  gcPreview.test_logo.x * scaleWidth;

            gcPreview.test_logo.y =  gcPreview.test_logo.y * scaleHeight;

            gcPreview.test_logo.width = gcPreview.test_logo.width * scaleWidth;

            gcPreview.test_logo.height = gcPreview.test_logo.height * scaleHeight;

            toPrinter.addChild(gcPreview.test_logo);

        }else{

            gcPreview.test02_logo.x =  gcPreview.test02_logo.x * scaleWidth;

            gcPreview.test02_logo.y =  gcPreview.test02_logo.y * scaleHeight;

            gcPreview.test02_logo.width = gcPreview.test02_logo.width * scaleWidth;

            gcPreview.test02_logo.height = gcPreview.test02_logo.height * scaleHeight;

            toPrinter.addChild(gcPreview.test02_logo);

        }

        //addClipping();  // Adds a what square where the logos would go to send to the printer.

        srcFinal.draw(toPrinter);      // Write the movieclip to the Bitmap Data object

        var jpgFinal:ByteArray   = jpgEncoder.encode(srcFinal);   // Create the bytearray to store the jpeg stream

        var jpgPreview:ByteArray = jpgEncoder.encode(srcPreview);

        upload(jpgFinal, jpgPreview);

    //}

}

function upload(jpgFinal:ByteArray, jpgPreview:ByteArray):void {

    var url:String = FLASH_API;

    var ldr:MultipartURLLoader = new MultipartURLLoader();

    var fs:Number = new Number();

    //Add the event listeners

    ldr.addEventListener(ProgressEvent.PROGRESS, onProgress);

    ldr.addEventListener(Event.COMPLETE, onComplete);

    //Set the _FUNCTION_ post variable

    ldr.addVariable("_FUNCTION_", "upload_final");

    // Set card_face_id based on which template we selected.

    if (gcPreview.test_logo.visible == true) {

        ldr.addVariable("card_face_id", test_logo_id);

    } else {

        ldr.addVariable("card_face_id", test02_logo_id);

    }

    //Add the preview and final images

    ldr.addFile(jpgFinal, "final.jpg", "final");

    ldr.addFile(jpgPreview, "preview.jpg", "preview");   

    ldr.load(url); //Upload them to the server

    //Upload is in progress

    function onProgress(e:ProgressEvent):void {

        //Placeholder

    }

    //Upload is complete

    function onComplete(e:Event):void {

        var url:String = new String()  //store the URL fpr the URLRequest

        var parentURL:String = "+parent_url:" + ExternalInterface.call("setParentUrl");  //Used to determine the redirection

        //Check and see if we have a value for forward_page

        if (forwardPage != null) {

            url = forwardPage;

        } else {

            url = "custom_add_to_cart.py?card_image_id:" + cardImageID + parentURL;

        }

        var urlRequest:URLRequest = new URLRequest(url);

        navigateToURL(urlRequest, "_self");

    }

    //Error with the Upload

    function onError(e:Event):void {

        //Placeholder

    }

}

</code>

[Guest]

Thank you very much kglad!!! I'm very new to these forum boards!!!

[kglad]

that's still difficult to read but, the first error i see is a nested named function:

function addImage(e:Event):void {

    deselect();

    //Declare a file object and add it's listener

    userUploadedImage = new FileReference();

    //Declare event listeners

    userUploadedImage.addEventListener(Event.SELECT, uploadUserImage);

    //Select the file

    userUploadedImage.browse(imageTypes);

    //When it's selected, upload it to the server

    function uploadUserImage(e:Event):void {

        loaderLayer.visible = true;

//////////////////////////////

it appears uploadUserImage() is nested inside addImage().  that's wrong.

[Guest]

Hmm, okay, thank you. How can I fix that?

[kglad]

unnest them.

anything like:

function a(){

function b(){

}

}

should be recoded like:

function a(){

}

function b(){

}

[Guest]

kglad, thank you very much. I will give that a try!!!

[kglad]

you're welcome.

[Guest]

Hi kglad,

I gave your suggestion a try and I'm still having the distorted preview image appear. You are probably very busy, but was wondering/hoping you'd had a chance to have a further look into that code above?

[kglad · Accepted solution]

the end of your code has nested functions that also need to be unnested. 

there are probably problems in the middle to but your code is difficult to read because of a formatting issue.

[Guest]

Thanks kglad, your suggestions were very helpful plus I found some extra code that was also to blame!!! Thanks for your help!!! Have a great weekend!!!

[kglad]

you're welcome.