When using drawImage for canvas drawing, the pictures to be drawn are of different sizes and proportions, so like html+css layout, contain and cover are needed to meet different needs.
containScale the image so that the long side of the image is fully visible while maintaining the aspect ratio. In other words, the picture can be displayed completely.
If the image is placed in the rectangle of the fixed box according to the contain mode, the image needs to be scaled to a certain extent.
The principle is:
If the width and height of the picture are not equal, so that the long side of the picture can be fully displayed, then the height side of the original picture will be equal to the side corresponding to the fixed box after scaling, and the other side will be found in equal proportions.
If the width and height of the picture are equal, the width and height of the scaled picture will be determined according to the width and height of the fixed box. If the width of the fixed box is greater than the height, then the height of the scaled picture will be equal to the height of the fixed box, and the other side can be found correspondingly, and vice versa. Likewise.
/** * @param {Number} sx fixed x coordinate of the box, sy fixed y left subscript of the box* @param {Number} box_w fixed width of the box, box_h fixed height of the box* @param {Number} source_w original image Width, source_h height of original image* @return {Object} {parameters of drawImage, x coordinate, y coordinate, width and height of the scaled image}, corresponding to 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); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //Fix the position and size of the box - the image needs to be placed in this box ctx.fillRect(30, 30, 150, 200); var img = new Image(); img.onload = function () { 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; //Note: In img preloading mode, onload should be placed above the value assigned to src to avoid the onload event being unable to be triggered when there is already a cache, resulting in the event in onload not being executed. coverScale the image while maintaining the aspect ratio so that only the short side of the image is fully visible. That is, the image is usually complete only in the horizontal or vertical direction, and clipping will occur in the other direction.
principle:
Capture part of the image according to the proportion of the fixed box
/** * @param {Number} box_w fixed box width, box_h fixed box height* @param {Number} source_w original picture width, source_h original picture height* @return {Object} {intercepted picture information}, Corresponding to drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) parameters*/ function 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 *sHeight/box_h; sx = (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; } return{ sx, sy, sWidth, sHeight } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //Fix the position and size of the box--the picture needs to be placed in this box ctx.fillRect(30 , 30, 150, 200); var img = new Image(); img.onload = function () { console.log(img.width,img.height); var imgRect = coverImg(150,200,img.width,img.height); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); } img.src = ./timg2.jpg; //Note: In img preloading mode, onload should be placed above the value assigned to src to avoid the onload event being unable to be triggered when there is already a cache. As a result, the events in onload are not executed.The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.