Canvas image to blob, changing image size

Viewed 7703

I have a canvas that scales an image to fit inside of it, what I'm trying to do is export the image in a larger size than what the canvas is set to. I am using the canvas.toBlob method to get the blob data and am sending that to my server as an uploaded file.

For example, the canvas is 350px by 350px, I'd like to save the image as 800px by 1000px.

<canvas id="myCanvas" width="350" height="350"></canvas>

<script type="text/javasript">
    var canvas = document.getElementById('myCanvas');

    var context = canvas.getContext('2d');
    var imageObj = new Image();
        imageObj.onload = function() {
            var img_info = { width:527, height:350 };
            var sourceX = 0;
            var sourceY = 150;
            var sourceWidth = 4520;
            var sourceHeight = 3000;
            var destWidth = img_info.width;
            var destHeight = img_info.height;
            var destX = canvas.width / 2 - destWidth / 2;
            var destY = canvas.height / 2 - destHeight / 2;

            context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        };

    imageObj.src = 'hhttp://i.imgur.com/tKplLLb.jpg';

    canvas.toBlob(
        function (blob) {
            var formData = new FormData();
            formData.append('file', blob);

            jQuery.ajax({
                url: "test.php",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {

                }
            });
       },
     'image/jpg'
    );
</script>
1 Answers
Related