html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪

前言:

我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者,让图片们尽可能优美地展现在网页上是一个很愉悦的责任。

今天就给太瘦小图片们伸展伸展或者给XXXL号减减肥吧(~ ̄▽ ̄)~

一、canvas绘图API

工欲善其事;必先利其器。

隆重请出主角:canvas绘图函数drawImage(),酱酱酱~

它能做什么:

1. 绘制图像:将加载的图像绘制到canvas上;

2. 绘制画布:将画好的一个canvas画到另一个canvas上;

3. 绘制视频:差不多就是用来视频截图,哇(@ο@) 好厉害。

怎么做(敲黑板:今天只教绘制图像啊,老师没备课):

1. 获取图片

//1. 可以直接获取DOM元素

var img = document.getElementById("imgId")

//2. 或者新建一个

var img = new Image()

img.src = "imgsrc.jpg"

获取canvas上下文

//1. 获取画布

var canvas = document.getElementById("canvasId")

//2. 获取画布上下文

var ctx = canvas.getContext("2d")

在上下文画画!

img.onload = function(){

ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

}

参数释义:

drawImage有三种添加参数的情况,如下:

只规定原始图片开始剪切的位置,默认填充剩余宽高到画布上:

drawImage(img,sx,sy)

从指定位置裁剪原始图片指定宽高,填充到画布上:

drawImage(img,sx,sy,swidth,sheight)

从指定位置裁剪原始图片指定宽高,从指定位置开始显示到画布上指定宽高:

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

这里盗个图解释一下:

b61a227fdb7a40f6b2e3e6bf80854c62.png

二、拉伸并图片

原始图片的宽高较之显示区域较小,就需要美美地拉伸一下。

1. 原始图片宽高均小于显示区域

默认情况下会将原始图片的宽高都扯开成刚好铺满画布。这个就不管了,让它自由填充吧,freedom~

2. 原始图片仅宽度小于显示区域:黄色img,蓝色canvas

db2696b80679c893614a911fa02419f4.png

默认情况会将图片宽度拉伸,高度压缩,图片会被压得很~扁~

思路:将原始图片宽度拉开成现实区域宽度,而将高度等比例拉开,并且将超出部分上下各剪裁一半。

d48ecccfac2750b3d86dd97945d6d410.png

函数参数设置如下:

ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)

3.原始图片仅高度小于显示区域:

ee58f5c234c51068ddc6cb572384bd67.png

默认情况会将图片高度拉伸,宽度压缩,图片内容会被挤得很~细~

思路:将原始图片高度拉开成现实区域宽度,而将宽度等比例拉开,并且将超出部分左右各剪裁一半。

20e6474f7baef965d1d747fadaac5240.png

参数设置如下:

ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)

三、压缩并裁剪图片

原始图片的宽高较之显示区域较大,就需要小小地压缩一下。

基本思路:在原始图片的宽高均大于显示区域时,首先需要确定我们以宽/高中的哪一个为基准进行压缩,因此需要计算原始图片的宽/高与显示区域的宽/高的比例,以比例高(也就是相差小)的那个作为基准,等比例压缩后相差多的那个需要裁减掉一部分。

1. dw < dh

63f2871f9df583e83b36dc40044f2235.png

默认情况会将图片高度、宽度分别按各自的比例压缩,图片内容会被拉得很~扁~

思路:将原始图片宽度压缩成现实区域宽度,而将高度等比例拉开,并且将超出部分上下各剪裁一半。【同拉伸情况2】

d48ecccfac2750b3d86dd97945d6d410.png

函数参数设置如下:

ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)

2. dh < dw

be69ea26b3fe9cdae8e3448ef70de688.png

默认情况会将图片高度、宽度按各自比例压缩,图片内容会被挤得很~细~

思路:将原始图片高度拉开成现实区域宽度,而将宽度等比例拉开,并且将超出部分左右各剪裁一半。【同拉伸情况3】

20e6474f7baef965d1d747fadaac5240.png

参数设置如下:

ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)

四、小结

其实不管是先拉伸再裁剪还是先压缩再裁剪,基本思想都是一样的:把图片从默认的填充比例中拯救出来,让它能等比例地变换大小,避免被奇怪的缩放比例搞得颜值比较奇怪。本文中的默认情况均是指直接使用img标签上传图片的情况,相当于:

ctx.drawImage(img,0,0,w,h,0, 0, 300, 200)

划重点!上文中的代码综合如下:

var canvas = $(".good-img")[0]

var ctx = canvas.getContext("2d")

var img = new Image()

img.src = "images/3.jpg"

img.onload = function () {

var w = img.width

var h = img.height

var dw = 300/w //canvas与图片的宽高比

var dh = 200/h

var ratio

// 裁剪图片中间部分

if(w > 300 && h > 200 || w < 300 && h < 200){

if (dw > dh) {

ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)

} else {

ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)

}

}

// 拉伸图片

else{

if(w < 300){

ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)

}else {

ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)

}

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/337687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

switch日文键盘打中文_12月有哪些Switch游戏值得期待?

文章转自A9vg&#xff0c;作者setsuka_duki 经历了11月的游戏浪潮后&#xff0c;一年中最后一个月份也悄然而至&#xff0c;相比较“战火连天”的11月&#xff0c;在12月发售的重量级游戏并不算太多&#xff0c;这边为大家整理12月哪些值得一玩的Switch游戏。 《Tools Up!》(分…

neo4j cypher_Neo4j:使用Cypher生成实时建议

neo4j cypherNeo4j的最常见用途之一是构建实时推荐引擎&#xff0c;一个共同的主题是它们利用大量不同的数据来提出有趣的推荐。 例如&#xff0c; 在此视频中&#xff0c; 阿曼达&#xff08;Amanda&#xff09;展示了约会网站如何通过社交联系开始&#xff0c;然后介绍热情&…

基于 C++11 的线程池 threadpool , 简洁且可以带任意多的参数

点击蓝字关注我们咳咳。C11 加入了线程库&#xff0c;从此告别了标准库不支持并发的历史。然而 c 对于多线程的支持还是比较低级&#xff0c;稍微高级一点的用法都需要自己去实现&#xff0c;譬如线程池、信号量等。线程池(thread pool)这个东西&#xff0c;在面试上多次被问到…

html jq移到出现内容,jquery操作html元素之( 获得内容和属性)

jQuery DOM 操作jQuery 中非常重要的部分&#xff0c;就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法&#xff0c;这使访问和操作元素和属性变得很容易。提示&#xff1a;DOM Document Object Model(文档对象模型)DOM 定义访问 HTML 和 XML 文档的标准&#xff1a;…

c# 字典排序_Python零基础入门之列表与字典

本篇内容需结合源码&#xff0c;获取方法看末尾数据结构数据结构就是指从计算机存储、组织数据的结构列表(List) 元组(Tuple)字典(Dictionary)集合(Set)列表(List)列表中的数据按顺序排列列表有正序与倒序两种索引列表可存储任意类型数据&#xff0c;且允许重复创建列表变量名 …

jaxb xsd生成xml_使用JAXB和Jackson从XSD生成JSON模式

jaxb xsd生成xml在本文中&#xff0c;我演示了一种从XML Schema &#xff08;XSD&#xff09;生成JSON Schema的 方法 。 在概述从XML Schema创建JSON Schema的方法的同时&#xff0c;本文还演示了JAXB实现的使用&#xff08;与JDK 9捆绑在一起的xjc版本2.2.12-b150331.1824 [b…

C语言中结构体struct的用法

点击蓝字关注我们定义结构体变量下面举一个例子来说明怎样定义结构体变量。struct string { char name[8]; int age; char sex[2]; char depart[20]; float wage1, wage2, wage3, wage4, wage5; }person;这个例子定义了一个结构名为string的结构体变量person。还可以省略变量名…

html全屏漂浮,jquery全屏漂浮广告插件,可点击关闭(原创)

jquery全屏漂浮广告插件 兼容主流浏览器 实现简单 调用简单 在线预览 源码下载jquery全屏漂浮广告插件 兼容主流浏览器 实现非常简单说明&#xff1a;jquery在1.9开始不支持.live()方法的写法而改用.on()&#xff0c;见http://jquery.com/upgrade-guide/1.9/#live-removed.该插…

华南理工计算机接口技术随堂练习_研究生考试计算机408跟845有什么区别?

楼上已经解释了什么是408&#xff0c;什么是845&#xff0c;那我当时考的就是计算机408&#xff0c;我就来补充一下408该怎么复习才能拿高分吧。首先介绍一下我自己&#xff0c;计算机本科生&#xff0c;然后头铁考了某个985的计算机专业&#xff0c;最后以403分的成绩成功上岸…

关于RabbitMQ集群分区的通知

如果您在集群中运行RabbitMQ&#xff0c;则集群不太可能会被分区 &#xff08;集群的一部分失去与其余部分的连接&#xff09;。 上面的链接页面介绍了显示状态和配置行为的基本命令。 当发生分区时&#xff0c;您首先希望得到通知&#xff0c;然后再解决它。 RabbitMQ实际上使…

C++ 面试考点(二)

点击蓝字关注我们11、extern 用法&#xff1f;extern 修饰变量的声明如果文件a.c 需要引用b.c 中变量int v&#xff0c;就可以在a.c 中声明extern int v&#xff0c;然后就可以引用变量v。extern 修饰函数的声明如果文件a.c 需要引用b.c 中的函数&#xff0c;比如在b.c 中原型是…

内存不能为read进不去桌面_四级报名进不去怎么办

英语四级报名进不去怎么办?这里提供有两种方法&#xff0c;一种是重复刷新&#xff0c;直到页面出现;另外一种就是错峰报名&#xff0c;叉开登录高峰期。很多考生在报名的时候遇到困难&#xff0c;最多的就是报名页面进不去&#xff0c;这个时候有一些考生就会产生疑惑&#x…

bean创建异常_快速提示:消息驱动Bean中的异常处理

bean创建异常让我们快速回顾一下关于消息驱动Bean的特殊处理。 MDB的入口点是重写的onMessage方法。 它不提供引发检查异常的作用域&#xff0c;因此&#xff0c;如果要处理错误情形&#xff0c;则需要从代码中传播未检查异常&#xff08;java.lang.RuntimeException的子类&am…

C语言线程库的使用,这篇值得收藏!

点击蓝字关注我们1. 线程概述线程是轻量级的进程&#xff08;LWP&#xff1a;light weight process&#xff09;&#xff0c;在 Linux 环境下线程的本质仍是进程。在计算机上运行的程序是一组指令及指令参数的组合&#xff0c;指令按照既定的逻辑控制计算机运行。操作系统会以进…

alexeyab darknet 编译_【目标检测实战】Darknet—yolov3模型训练(VOC数据集)

原文发表在&#xff1a;语雀文档0.前言本文为Darknet框架下&#xff0c;利用官方VOC数据集的yolov3模型训练&#xff0c;训练环境为&#xff1a;Ubuntu18.04下的GPU训练&#xff0c;cuda版本10.0&#xff1b;cudnn版本7.6.5。经过一晚上的训练&#xff0c;模型20个类别的mAP达到…

html字符串转svg,【SVG】如何操作SVG Text

上周我们学习了如何使用元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本&#xff0c;也尝试了给SVG文本中的每个字符定位。关于元素还有很多内容。在处理SVG文本时&#xff0c;不要局限于x和y属性。元素还有几个可以添加的属性&#xff0c;现在我们开始讨论吧。dx和dy属…

aws sqs_在Spring使用AWS SQS创建消息驱动Bean

aws sqs在我之前的文章中&#xff0c;我展示了一个简单的示例&#xff0c;该示例如何将AWS SQS与Spring Framework结合使用以将消息放入队列并从队列中读取消息。 在本文中&#xff0c;我将更进一步&#xff0c;并使用Spring创建一个“消息驱动的Bean”&#xff0c;以便对放入队…

C++ 面试考点(三)

点击蓝字关注我们21、构造函数和析构函数可以调用虚函数吗&#xff0c;为什么在C中&#xff0c;提倡不在构造函数和析构函数中调用虚函数&#xff1b;在构造函数和析构函数调用的所有函数(包括虚函数)都是编译时确定的, 虚函数将运行该类中的版本.因为父类对象会在子类之前进行…

用终端访问路由器设置端口开发_serial for mac(终端管理软件)v2.0.3

原标题&#xff1a;serial for mac(终端管理软件)v2.0.3serial for mac是应用在Mac上的一款终端管理软件&#xff0c;可以帮助您连接和控制串行设备&#xff0c;如服务器&#xff0c;路由器或调制解调器等网络设备&#xff0c;PBX系统等。好消息是Serial为大多数串行设备提供了…

学计算机编程200字感想,计算机学习心得体会

你们现在是在用电脑教学吗&#xff1f;本文是出国留学网特意为你准备的《课堂计算机学习心得体会》&#xff0c;希望对你能够提供帮助&#xff0c;如果还有更多需要了解的&#xff0c;欢迎访问出国留学网主页了解更多。https://www.liuxue86.com利用计算机能使动画、声音、文字…