canvas 图片根据父盒子大小 计算生成比例大小的图片

   

calculation(ctxX, ctxY, imgW, imgH) {

ctxX：父盒子的宽  ctxY：父盒子的高 imgW：图片原本的宽 imgH：图片原本的高

      console.log(ctxX / ctxY, imgW / imgH);

      let obj = {

        x: 0, // x轴

        y: 0, // y轴

        w: 0, // 图片宽度

        h: 0, // 图片高度

      };

      if (ctxX / ctxY > imgW / imgH) {

        obj.w =

          Math.ceil(imgW * (ctxY / imgH)) <= ctxX

            ? Math.ceil(imgW * (ctxY / imgH))

            : ctxX;

        obj.h = ctxY;

      } else {

        obj.w = ctxX;

        obj.h =

          Math.ceil(imgH * (ctxX / imgW)) <= ctxY

            ? Math.ceil(imgH * (ctxX / imgW))

            : ctxY;

      }

      obj.x = Math.round((ctxX - obj.w) / 2);

      obj.y = Math.round((ctxY - obj.h) / 2);

      return obj; 根据父盒子的大小，生成 按父盒子比例 缩放的图片

    },