캔버스 그리기에 drawImage를 사용할 때 그려지는 이미지의 크기와 비율이 다르기 때문에 다양한 요구 사항을 충족하기 위해 포함 및 표지를 포함하여 html+css 레이아웃과 같아야 합니다.
포함하다가로 세로 비율을 유지하면서 이미지의 긴 면이 완전히 보이도록 이미지 크기를 조정합니다. 즉, 그림이 완전히 표시될 수 있습니다.
포함 모드에 따라 고정 상자의 직사각형에 이미지가 배치되면 이미지의 크기를 어느 정도 조정해야 합니다.
원칙은 다음과 같습니다.
그림의 너비와 높이가 동일하지 않아 그림의 긴 쪽이 완전히 표시될 수 있는 경우 원본 그림의 높이 쪽은 크기 조정 후 고정 상자에 해당하는 쪽과 같고 다른 쪽은 동일합니다. 측면은 동일한 비율로 발견됩니다.
그림의 너비와 높이가 같은 경우 고정 상자의 너비와 높이에 따라 크기가 조정된 그림의 너비와 높이가 결정됩니다. 고정 상자의 너비가 높이보다 크면 높이가 결정됩니다. 크기가 조정된 그림은 고정 상자의 높이와 같으며 반대쪽도 그에 따라 찾을 수 있으며 그 반대도 마찬가지입니다.
/** * @param {Number} sx 상자의 고정 x 좌표, sy 고정 y 상자의 왼쪽 첨자* @param {Number} box_w 상자의 고정 너비, box_h 상자의 고정 높이* @param {Number} source_w 원본 이미지 너비, source_h 원본 이미지 높이* @return {Object} {drawImage의 매개변수, x 좌표, y 좌표, 크기가 조정된 이미지의 너비 및 높이}, drawImage(imageResource, dx, dy, dWidth, dHeight)에 해당 */ function containImg(sx, sy, box_w, box_h, source_w, source_h ) { var dx = sx, dy = sy, dWidth = box_w, dHeight = box_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ dHeight = source_h*dWidth/source_w; dy = sy + (box_h-dHeight)/2 }else if(source_w < source_h || (source_w) == source_h && box_w > box_h)){ dWidth = source_w*dHeight/source_h; dx = sx + (box_w-dWidth)/2; } return{ dx, dy, dWidth, dHeight } } var c=document.getElementById(myCanvas); ctx.fillStyle = '#e1f0ff'; //상자의 위치와 크기를 수정합니다. 이미지는 이 상자에 배치되어야 합니다. ctx.fillRect(30, 30, 150, 200) var img = new Image() { console .log(img.width,img.height); var imgRect = containImg(30,30,150,200,img.width,img.height); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight) } img.src = ./timg2.jpg; //참고: img 사전 로딩 모드에서는 이미 캐시가 있을 때 onload 이벤트가 트리거될 수 없어 onload 이벤트가 실행되지 않는 것을 방지하기 위해 onload를 src에 할당된 값 위에 배치해야 합니다. 씌우다이미지의 짧은 면만 완전히 표시되도록 가로 세로 비율을 유지하면서 이미지 크기를 조정합니다. 즉, 이미지는 일반적으로 수평 또는 수직 방향으로만 완성되고 다른 방향에서는 클리핑이 발생합니다.
원칙:
고정된 상자의 비율에 따라 이미지의 일부를 캡처합니다.
/** * @param {Number} box_w 고정 상자 너비, box_h 고정 상자 높이* @param {Number} source_w 원본 그림 너비, source_h 원본 그림 높이* @return {Object} {가로채기된 그림 정보}, drawImage(imageResource에 해당) , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 매개변수*/ 함수 CoverImg(box_w, box_h, source_w, source_h){ var sx = 0, sy = 0, sWidth = source_w, sHeight = source_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ sWidth = box_w *s높이/상자_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; sy = (source_h-sHeight)/2; sx, sy, sWidth, sHeight } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //상자의 위치와 크기를 수정합니다. 그림은 이 상자에 배치되어야 합니다. fillRect(30 , 30, 150, 200); var img = new Image() = function () { console.log(img.width,img.height); var imgRect = CoverImg(150,200,img.width,img.height); console.log('imgRect',imgRect)(img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); } img.src = ./timg2.jpg; //참고: img 사전 로드 모드에서는 onload 이벤트가 발생할 수 없는 것을 방지하기 위해 src에 할당된 값 위에 배치해야 합니다. 이미 캐시이므로 onload 이벤트가 실행되지 않습니다.위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.