canvas制图依照contain或cover方法兼容并垂直居中显

日期:2021-02-22 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

canvas制图时drawImage,必须绘图的照片尺寸不一样,占比各不相同,因此就必须像html+css合理布局那样,必须contain和cover来考虑不一样的要求。

contain

维持横纵比放缩照片,使照片的长边能彻底显示信息出来。也便是说,能够详细地将照片显示信息出来。

照片依照contain方式放到固定不动盒子的矩形框内,则必须对照片开展1定的放缩。

标准是:

假如照片宽高不等,使照片的长边能彻底显示信息出来,则原照片高的1边放缩后等于固定不动盒子对应的1边,等占比求出此外1边,

假如照片宽高相同,则依据固定不动盒子的宽高来决策放缩后照片的宽高,固定不动盒子的宽敞于高,则放缩后的照片高于固定不动盒子的高宽比,对应求出此外1边便可,反之亦然。

        /**
         * @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");
        var ctx=c.getContext("2d");
        ctx.fillStyle = '#e1f0ff';
        //固定不动盒子的部位和尺寸--照片必须放在这个盒子内
        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";  
        //注:img预载入方式下,onload应当放在为src取值的上面,以免已有缓存文件的状况下没法开启onload恶性事件从而致使onload中的恶性事件不实行的状况产生

cover

维持横纵比放缩照片,只确保照片的短边能彻底显示信息出来。也便是说,照片一般只在水平或竖直方位是详细的,另外一个方位可能产生截取。

基本原理:

依照固定不动盒子的占比截取照片的一部分

        /**
         * @param {Number} box_w 固定不动盒子的宽, box_h 固定不动盒子的高
         * @param {Number} source_w 原照片的宽, source_h 原照片的高
         * @return {Object} {截取的照片信息内容},对应drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)主要参数
        */
        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';
        //固定不动盒子的部位和尺寸--照片必须放在这个盒子内
        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";  
        //注:img预载入方式下,onload应当放在为src取值的上面,以免已有缓存文件的状况下没法开启onload恶性事件从而致使onload中的恶性事件不实行的状况产生

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。