资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/canvas绘图按照contain或者cover方式适配，并居中显示

canvas绘图按照contain或者cover方式适配，并居中显示

tianyu / 1960人阅读

摘要：保持纵横比缩放图片，使图片的长边能完全显示出来。图片按照模式放到固定盒子的矩形内，则需要对图片进行一定的缩放。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

</>复制代码 
  1. canvas绘图时drawImage，需要绘制的图片大小不同，比例各异，所以就需要像html+css布局那样，需要contain和cover来满足不同的需求。
contain

保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

图片按照contain模式放到固定盒子的矩形内，则需要对图片进行一定的缩放。
原则是：

如果图片宽高不等，使图片的长边能完全显示出来，则原图片高的一边缩放后等于固定盒子对应的一边，等比例求出另外一边，

如果图片宽高相等，则根据固定盒子的宽高来决定缩放后图片的宽高，固定盒子的宽大于高，则缩放后的图片高等于固定盒子的高度，对应求出另外一边即可，反之亦然。

</>复制代码 
  1.         /**
  2.          * @param {Number} sx 固定盒子的x坐标,sy 固定盒子的y左标
  3.          * @param {Number} box_w 固定盒子的宽, box_h 固定盒子的高
  4.          * @param {Number} source_w 原图片的宽, source_h 原图片的高
  5.          * @return {Object} {drawImage的参数，缩放后图片的x坐标，y坐标，宽和高},对应drawImage(imageResource, dx, dy, dWidth, dHeight)
  6.          */
  7.         function containImg(sx, sy , box_w, box_h, source_w, source_h){
  8.             var dx = sx,
  9.                 dy = sy,
  10.                 dWidth = box_w,
  11.                 dHeight = box_h;
  12.             if(source_w > source_h || (source_w == source_h && box_w < box_h)){
  13.                 dHeight = source_h*dWidth/source_w;
  14.             dy =  sy + (box_h-dHeight)/2;
  15.             }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){
  16.                 dWidth = source_w*dHeight/source_h;
  17.                 dx = sx + (box_w-dWidth)/2;
  18.             }
  19.             return{
  20.                 dx,
  21.                 dy,
  22.                 dWidth,
  23.                 dHeight
  24.             }
  25.         }
  26.         var c=document.getElementById("myCanvas");
  27.         var ctx=c.getContext("2d");
  28.         ctx.fillStyle = "#e1f0ff";
  29.         //固定盒子的位置和大小--图片需要放在这个盒子内
  30.         ctx.fillRect(30, 30, 150, 200);
  31.         var img = new Image();
  32.         img.onload = function () {
  33.             console.log(img.width,img.height);
  34.             
  35.             var imgRect = containImg(30,30,150,200,img.width,img.height);
  36.             console.log("imgRect",imgRect);
  37.             ctx.drawImage(img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight); 
  38.             
  39.         }
  40.         img.src = "./timg2.jpg";  
  41.         //注：img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生
cover

保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

原理：

按照固定盒子的比例截取图片的部分

</>复制代码 
  1.         /**
  2.          * @param {Number} box_w 固定盒子的宽, box_h 固定盒子的高
  3.          * @param {Number} source_w 原图片的宽, source_h 原图片的高
  4.          * @return {Object} {截取的图片信息}，对应drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)参数
  5.         */
  6.         function coverImg(box_w, box_h, source_w, source_h){
  7.             var sx = 0,
  8.                 sy = 0,
  9.                 sWidth = source_w,
  10.                 sHeight = source_h;
  11.             if(source_w > source_h || (source_w == source_h && box_w < box_h)){
  12.                 sWidth = box_w*sHeight/box_h;
  13.                 sx = (source_w-sWidth)/2;
  14.             }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){
  15.                 sHeight = box_h*sWidth/box_w;
  16.                 sy = (source_h-sHeight)/2;
  17.             }
  18.             return{
  19.                 sx,
  20.                 sy,
  21.                 sWidth,
  22.                 sHeight
  23.             }
  24.         }
  25.         var c=document.getElementById("myCanvas");
  26.         var ctx=c.getContext("2d");
  27.         ctx.fillStyle = "#e1f0ff";
  28.         //固定盒子的位置和大小--图片需要放在这个盒子内
  29.         ctx.fillRect(30, 30, 150, 200);
  30.         var img = new Image();
  31.         img.onload = function () {
  32.             console.log(img.width,img.height);
  33.             
  34.             var imgRect = coverImg(150,200,img.width,img.height);
  35.             console.log("imgRect",imgRect);
  36.             ctx.drawImage(img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); 
  37.         }
  38.         img.src = "./timg2.jpg";  
  39.         //注：img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生
GPU云服务器 云服务器 按照云计算服务的方式和服务对象的范围 截图保存并显示 居中显示 java修改值并显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117373.html

相关文章

  • canvas绘图按照contain或者cover方式适配，并居中显示

    摘要：保持纵横比缩放图片，使图片的长边能完全显示出来。图片按照模式放到固定盒子的矩形内，则需要对图片进行一定的缩放。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 canvas绘图时drawImage，需要绘制的图片大小不同，比例各异，所以就需要像html+css布局那样，需要contain和cover来满足不同的需求。 contain 保持纵横比缩放图片，使图片的长...

    jayzou 评论0 收藏0

  • canvas绘图按照contain或者cover方式适配，并居中显示

    摘要：保持纵横比缩放图片，使图片的长边能完全显示出来。图片按照模式放到固定盒子的矩形内，则需要对图片进行一定的缩放。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 canvas绘图时drawImage，需要绘制的图片大小不同，比例各异，所以就需要像html+css布局那样，需要contain和cover来满足不同的需求。 contain 保持纵横比缩放图片，使图片的长...

    novo 评论0 收藏0

  • 使用CANVAS实现交互性圆形马赛克效果

    摘要：在中任意从本地选择一张图片，然后通过鼠标移动或者移动端就能实现圆形分裂的效果。个人习惯在构造函数最后加上方法，方法里做一些准备工作，完成前的一些必要的事情。绘制第一个，也是最大的一个圆形。 在看D3.js的时候，无意间看到了一个例子，觉得很有趣，像是会分裂的圆形马赛克。看了下代码，使用svg完成的，但是具体实现方式使得在手机端无法把玩，于是就自己实现了一个canvas版本的。代码很简单...

    Aklman 评论0 收藏0

  • 使用CANVAS实现交互性圆形马赛克效果

    摘要：在中任意从本地选择一张图片，然后通过鼠标移动或者移动端就能实现圆形分裂的效果。个人习惯在构造函数最后加上方法，方法里做一些准备工作，完成前的一些必要的事情。绘制第一个，也是最大的一个圆形。 在看D3.js的时候，无意间看到了一个例子，觉得很有趣，像是会分裂的圆形马赛克。看了下代码，使用svg完成的，但是具体实现方式使得在手机端无法把玩，于是就自己实现了一个canvas版本的。代码很简单...

    starsfun 评论0 收藏0

  • 移动端布局与适配

    摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。 移动端页面适配—...

    Clect 评论0 收藏0

发表评论

登陆后可评论

0条评论

tianyu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<