Ao usar drawImage para desenho em tela, as imagens a serem desenhadas são de diferentes tamanhos e proporções, portanto, assim como o layout html + css, o conteúdo e a capa são necessários para atender a diferentes necessidades.
conterDimensione a imagem para que o lado mais longo da imagem fique totalmente visível, mantendo a proporção da imagem. Em outras palavras, a imagem pode ser exibida completamente.
Se a imagem for colocada no retângulo da caixa fixa de acordo com o modo de contenção, a imagem precisará ser dimensionada até certo ponto.
O princípio é:
Se a largura e a altura da imagem não forem iguais, de modo que o lado longo da imagem possa ser totalmente exibido, então o lado da altura da imagem original será igual ao lado correspondente à caixa fixa após o dimensionamento, e o outro lado será encontrado em proporções iguais.
Se a largura e a altura da imagem forem iguais, a largura e a altura da imagem em escala serão determinadas de acordo com a largura e a altura da caixa fixa. Se a largura da caixa fixa for maior que a altura, então a altura da. a imagem em escala será igual à altura da caixa fixa, e o outro lado poderá ser encontrado correspondentemente e vice-versa.
/** * @param {Number} sx fixo x coordenada da caixa, sy fixo y subscrito esquerdo da caixa* @param {Number} box_w largura fixa da caixa, box_h altura fixa da caixa* @param {Number} source_w largura da imagem original, source_h altura da imagem original* @return {Object} {parâmetros de drawImage, coordenada x, coordenada y, largura e altura da imagem dimensionada}, correspondentes a drawImage(imageResource, dx, dy, dWidth, dHeight) */ função contémImg(sx, sy, box_w, box_h, source_w, source_h ) { var dx = sx, dy = sy, dLargura = caixa_w, dAltura = caixa_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ dHeight = source_h*dWidth/source_w; == fonte_h && box_w > box_h)){ dLargura = source_w*dHeight/source_h; ctx.fillStyle = '#e1f0ff'; //Corrige a posição e o tamanho da caixa - a imagem precisa ser colocada nesta caixa ctx.fillRect(30, 30, 150, 200); .log(img.largura,img.altura); var imgRect = contémImg(30,30,150,200,img.largura,img.altura); console.log('imgRect',imgRect.drawImage(img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight } img.src = ./timg2.jpg; //Nota: No modo de pré-carregamento img, onload deve ser colocado acima do valor atribuído a src para evitar que o evento onload não possa ser acionado quando já existe um cache, resultando na não execução do evento onload. cobrirDimensione a imagem mantendo a proporção de aspecto para que apenas o lado mais curto da imagem fique totalmente visível. Ou seja, a imagem normalmente fica completa apenas na direção horizontal ou vertical, e o recorte ocorrerá na outra direção.
princípio:
Capture parte da imagem de acordo com a proporção da caixa fixa
/** * @param {Number} box_w largura fixa da caixa, box_h altura fixa da caixa* @param {Number} source_w largura da imagem original, source_h altura da imagem original* @return {Object} {informações da imagem interceptadas}, Correspondente a drawImage(imageResource , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) parâmetros*/ função coverImg(box_w, box_h, source_w, source_h){ var sx = 0, sy = 0, sWidth = source_w, sHeight = source_h;| (source_w == source_h && box_w < box_h)){ sWidth = box_w *sAltura/caixa_h; (source_w-sWidth)/2; }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ sHeight = box_h*sWidth/box_w; sx, sy, largura, altura } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff' //Corrige a posição e o tamanho da caixa - a imagem precisa ser colocada nesta caixa ctx .fillRect(30, 30, 150, 200); console.log(img.largura,img.altura); var imgRect = coverImg(150,200,img.largura,img.altura); imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); } img.src = ./timg2.jpg; //Nota: No modo de pré-carregamento img, onload deve ser colocado acima do valor atribuído a src para evitar que o evento onload não possa ser acionado quando houver já é um cache. Como resultado, os eventos em onload não são executados.O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.