Question

我目前正在尝试动态检索图片的位置并将其加载到html5画布中。画布处于引导响应环境中，因此在文档准备好之前我永远不知道画布的实际宽度。使用下面的代码，我设法将图像和画布调整到我需要的尺寸，但图像质量非常差。我认为这是因为尺寸的大幅减少但不幸的是我无法控制上传的原始图像的大小。

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());
});

我希望有人知道如何使用类似的方法来减少图像的宽度和高度，使用与上述相似的方法，同时保持图像的质量尽可能好，我知道期待一些质量下降，但目前处于无法使用状态。

先谢谢

JS / Jquery图像大小调整

0 个答案: