Scan the QR code picture directly from camera with ZXing

So, I already have the solution. In fact, the problem is not with the ZXing, but with the result of the taken image. Because when I try to take the image, and directly convert and show it into canvas, the result of the picture is tremendous big. That is why ZXing failed to decode it. But when I try to manage the canvas image first (to be 400 x 400 px in my case), send the base64 image to the server, convert it into image again in the server, and decode it. It works perfect like a charm.

Edited: Here is the code that I used for the solution (in order to make it readable, I remove some unrelated code. hopefully I didn't remove the useful part though)

var JsIndexPage = new function (jsonData) {
    this.pageData = {
        maxWidth: 400,
        maxHeight: 400
    };

    this.pageUI = {
        canvas: null,
        blankCanvas: null,
        messageDiv: null,
        cameraInput: null,
        uploadInput: null
    };

    this.initUI = function () {
        ///<summary>
        ///Display ui on the page
        ///</summary>

        this.pageUI.canvas = document.getElementById('capturedPhoto');
        this.pageUI.blankCanvas = document.getElementById('blank');
        this.pageUI.cameraInput = $('#cameraInput');
        this.pageUI.messageDiv = $("#message");
        this.pageUI.uploadInput = $('#uploadInput');

        //add triggers to buttons
        this.pageUI.cameraInput.on('change', function (e) {
            JsIndexPage.onCameraInputChanged(e);
        });

        this.pageUI.uploadInput.on('click', function () {
            JsIndexPage.onUploadInputClick();
        });
    };

    this.onCameraInputChanged = function (e) {
        /// <summary>
        /// On camera input changed write image to canvas
        /// </summary>

        var reader = new FileReader();
        reader.onload = function (event) {
            JsIndexPage.onFileSelected(event);
        }

        //contains the data as a URL representing the file's data as a base64 encoded string
        reader.readAsDataURL(e.target.files[0]);
    };

    this.onFileSelected = function (event) {
        ///<summary>
        /// Html5 file readed onLoad event handler
        ///</summary>

        var context = this.pageUI.canvas.getContext('2d');

        //instantiates the Image() object
        var img = new Image();
        img.onload = function () {

            //converts the sizes of image into the proper size (400 x 400 at maximum)
            if (img.width > JsIndexPage.pageData.maxWidth && img.height <= JsIndexPage.pageData.maxHeight) {
                JsIndexPage.pageUI.canvas.width = JsIndexPage.pageUI.maxWidth;
                JsIndexPage.pageUI.canvas.height = (JsIndexPage.pageUI.canvas.width / img.width) * img.height;
            }
            else if (img.width <= JsIndexPage.pageData.maxWidth && img.height > JsIndexPage.pageData.maxHeight) {
                JsIndexPage.pageUI.canvas.height = JsIndexPage.pageData.maxHeight;
                JsIndexPage.pageUI.canvas.width = (JsIndexPage.pageUI.canvas.height / img.height) * img.width;
            }
            else if (img.width <= JsIndexPage.pageData.maxWidth && img.height <= JsIndexPage.pageData.maxHeight) {
                JsIndexPage.pageUI.canvas.width = img.width;
                JsIndexPage.pageUI.canvas.height = img.height;
            }
            else if (img.width > JsIndexPage.pageData.maxWidth && img.height > JsIndexPage.pageData.maxHeight) {
                if (img.width > img.height) {
                    JsIndexPage.pageUI.canvas.width = JsIndexPage.pageData.maxWidth;
                    JsIndexPage.pageUI.canvas.height = (JsIndexPage.pageUI.canvas.width / img.width) * img.height;
                }
                else {
                    JsIndexPage.pageUI.canvas.height = JsIndexPage.pageData.maxHeight;
                    JsIndexPage.pageUI.canvas.width = (JsIndexPage.pageUI.canvas.height / img.height) * img.width;
                }
            }

            //draws the context to the canvas
            context.drawImage(img, 0, 0, JsIndexPage.pageUI.canvas.width, JsIndexPage.pageUI.canvas.height);
        }

        //changes the image source into the new one
        img.src = event.target.result;
    };
}