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


Posted in HTML / CSS onFebruary 18, 2019

canvas绘图时drawImage,需要绘制的图片大小不同,比例各异,所以就需要像html+css布局那样,需要contain和cover来满足不同的需求。

contain

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

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

原则是:

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

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

/**
         * @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中的事件不执行的情况发生

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 #HTML / CSS
Canvas系列之滤镜效果
Feb 12 #HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 #HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 #HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 #HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 #HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 #HTML / CSS
You might like
无限级别菜单的实现
2006/10/09 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
深入php内核之php in array
2015/11/10 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
一个实用的php验证码类
2017/07/06 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
js继承的实现代码
2010/08/05 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
React中的render何时执行过程
2018/04/13 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python中用Spark模块的使用教程
2015/04/13 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
python与C互相调用的方法详解
2017/07/14 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
30年同学聚会感言
2014/01/30 职场文书
酒店端午节活动方案
2014/08/26 职场文书
材料员岗位职责范本
2015/04/11 职场文书
公开致歉信
2019/06/24 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python