1

I'm currently attempting to dynamically retrieve the location of an image and load it into a html5 canvas. The canvas is in a bootstrap responsive environment hence I never know the actual width of the canvas until the document is ready. Using the code below I've managed to resize the image and canvas to what I require but the image quality is very poor. I'm thinking it is because of the vast reduction in size but again unfortunately I have no control over the size of the original image uploaded. 

function load_canvas_image(photo_type, vehicle_index) {

    image_location = get_image_location(photo_type, vehicle_index);

    var img = new Image();
    img.src = image_location;

    var canvas = $("#myCanvas")[0];
    var canvas_context = canvas.getContext("2d");

    canvas_width = canvas.width;
    canvas_height = canvas.height;

    img.onload = function() {
        cur_height = img.height;
        cur_width = img.width;

        aspect_ratio = cur_width/canvas_width;

        new_height = cur_height/aspect_ratio;

        canvas.height = new_height;
        canvas_context.drawImage(img, 0, 0, canvas.width, canvas.height);   
    }
};

$(document).on("change", "#add_damage_location", function() {
    load_canvas_image($(this).val(), $('#vehicle_index').val());
});

I'm hoping someone knows how to use a similar method to reduce the width and height of an image using a similar method to the above whilst keeping the quality of the image as good as possible, I know to expect some reduction in quality but in it's current state it is unusable.

Thanks in Advance

user1530205
  • 302
  • 6
  • 19
  • 1
    Have you seen this question/answer? http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality – Scott Oct 21 '14 at 16:07
  • 1
    Unfortunately not, I did have a quick search but didn't come across it, I'll have a look now. Thanks – user1530205 Oct 21 '14 at 16:10

0 Answers0