Question

根据帖子HTML Canvas: Scaling image to fit without stretching?，当我打开一个图像以适应画布时，如果我使用descktop视图，它就可以工作，但是当我使用响应视图时它不能正常工作。我的应用程序发布在https://www.galeonweb.es/web，我用来打开图像的代码是：

var img=new Image();

img.onload=function(){
    var wrh=img.width/img.height;
    var newWidth=canvas.width;
    var newHeight=newWidth/wrh;
    if (newHeight>canvas.height){
        newHeight=canvas.height;
        newWidth=newHeight*wrh;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, newWidth, newHeight);
    //ctx.drawImage(img,0,0, img.width, img.height, 0,0, canvas.width, canvas.height); //Coloco la imagen en el canvas

    imgData=ctx.getImageData(0,0,canvas.width,canvas.height); //Extraigo su array       forma.guardarEnHistorico(imgData);
};

img.src=url;
//Cerramos el cuadro de dialogo abrir
ocultarVentana($('#abrir'));

另一方面，我使用具有以下代码的响应式CSS：

canvas {
    width:100%;
    height:420px;
    background:white;
    box-shadow: 0 0 10px black;
}

，HTML代码为：

<div id="lienzo">
    <video id="video" class="oculto" preload="none" autoplay>
        <source src="video.webM" type="video/webM">
    </video>  
    <button id="snap" class="oculto">Tomar Foto</button>
    <canvas id="poo"></canvas>
</div>

我感谢任何帮助，谢谢

缩放图像以适应画布而不拉伸

0 个答案: