Как изменить размер изображения холста HTML5 при изменении размера окна

Question

Я разрабатываю приложение Google Chrome, в котором есть холст html5 для отображения изображений. Перед отображением изображения с помощью ctx.drawImage (...), я уверен, что соотношение сторон изображения сохранено и т. Д. Когда размер окна изменяется, я добавил прослушиватель событий и вызов функции для изменения размера холста и изображения, здесь приведены соответствующие фрагменты кода:

var ctx = document.getElementById('canvas').getContext('2d'); 

window.onload = function() { 
    ctx.canvas.width = window.innerWidth-10; 
    ctx.canvas.height = window.innerHeight-30; 
    window.addEventListener('resize', resizeCanvas); 
}; 

function resizeCanvas(){ 
    var imgData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height); 
    ctx.canvas.width = window.innerWidth-10; 
    ctx.canvas.height = window.innerHeight-85; 
    ctx.putImageData(imgData, 0, 0); // Put the image data back onto the canvas 
} 

Однако это не работает. Кажется, что размер холста изменяется правильно (поскольку я добавил границу на нем, и я могу его отредактировать), но putImageData не обновляет изображение? Любые мысли о том, почему это может произойти?

UPDATE: в соответствии с приведенными ниже предложениями: Я изменил функцию изменения размера, чтобы попытаться изменить масштаб холста - но теперь изображение не отображается на всех разы при изменении размера окна

function resizeCanvas(){ 
    //var imgData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height); 

    ctx.scale(ctx.canvas.width/window.innerWidth,ctx.canvas.height/window.innerHeight); 
    ctx.canvas.width = window.innerWidth-10; 
    ctx.canvas.height = window.innerHeight-85; 
    //ctx.putImageData(imgData, 0, 0); // DO I NEED THIS NOW? 
} 

спасибо!

Answer 1

Я не уверен, если его самый элегантный способ сделать это, но то, что я работаю в настоящее время является полностью перекроить исходное изображение, то есть:

var ctx = document.getElementById('canvas').getContext('2d'); 
var img = new Image; 

window.onload = function() { 
    ctx.canvas.width = window.innerWidth-10; 
    ctx.canvas.height = window.innerHeight-30; 
    window.addEventListener('resize', resizeCanvas); 
}; 

function drawMainStage(img){ 

    var h    = img.height; 
    var w    = img.width; 
    var image_ratio = h/w; 
    var canvas_ratio = Math.round(ctx.canvas.height/ctx.canvas.width); 

    if (ctx.canvas.width >= ctx.canvas.height){ 
    // Landscape canvas, scale using height of canvas 
    if (h > ctx.canvas.height){ 

     // Image larger in at least one dimension compared to the canvas 
     var width_scaled = Math.round((ctx.canvas.height/h)*w); 
     var height_scaled = ctx.canvas.height; 

     if (w > h){ 
     if (width_scaled > ctx.canvas.width){ 
      height_scaled = Math.round((ctx.canvas.width/w)*h); 
      width_scaled = ctx.canvas.width; 
     } 
     } 
     var x1 = ctx.canvas.width/2 - width_scaled/2; 
     var y1 = ctx.canvas.height/2 - height_scaled/2; 
     ctx.drawImage(img, 0,0, w,h, x1,y1, width_scaled, height_scaled); 
    } 
    else 
    { 
     // Images smaller than the canvas 
     var x1 = Math.round(ctx.canvas.width/2 - w/2); 
     var y1 = Math.round(ctx.canvas.height/2 - h/2); 
     ctx.drawImage(img, x1,y1); 
    } 
} 
// else { 
//TBD} 

function resizeCanvas(){ 
    ctx.canvas.width = window.innerWidth-10; 
    ctx.canvas.height = window.innerHeight-85; 
    drawMainStage(img); 
} 

Answer 2

Вы можете использовать другой холст, чтобы хранить оригинальное изображение и использовать его для перерисовки на холсте в новых измерениях. Вы также можете использовать элемент изображения (но для этого потребуется перезагрузка изображения).

var canvasImageName = "//www.somedomain.com/someimage.png"; 
var original_Image, canvas_Resize, ctx_Resize mycanvas, myctx; 

$(document).ready(function() 
{ 
    window.onresize = CanvasSizeChanged; 

    original_Image = new Image; 
    original_Image.src = canvasImageName; 

    // canvas for image 
    mycanvas = document.getElementById('mycanvas'); 
    myctx = canvas_Real.getContext("2d"); 

    // create canvas to be used for resizing 
    canvas_Resize = document.createElement('canvas'); 
    ctx_Resize = canvas_Resize.getContext('2d'); 

    original_Image.onload=function() 
    { 
     // draw image on canvas 
     myctx.drawImage(this, 0, 0); 

     // also draw on background canvas 
     ctx_Resize.drawImage(this, 0, 0); 
    } 
}); 

function CanvasSizeChanged() 
{ 
    var w = mycanvas.parentNode.clientWidth; // find parent dimensions 

    var aspect = mycanvas.height/mycanvas.width; 

    mycanvas.width = w; 
    mycanvas.height = aspect*w; 

    // redraw scaled image using your backed up canvas image 
    myctx.drawImage(canvas_Resize, 0, 0, canvas_Resize.width, canvas_Resize.height, 
            0, 0, mycanvas.width, mycanvas.height); 
}