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!》(分…

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

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

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.该插…

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…

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属…

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为大多数串行设备提供了…

大神级的C++性能优化,你能看懂吗?

点击蓝字关注我们一、前言性能优化不管是从方法论还是从实践上都有很多东西&#xff0c;文章会从C语言本身入手&#xff0c;介绍一些性能优化的方法&#xff0c;希望能做到简洁实用。二、实例1在开始本文的内容之前&#xff0c;让我们看段小程序&#xff1a;// 获取一个整数对应…

钢笔墨水能否代替打印机墨水_LAMY钢笔应该如何选择墨水?

其实墨水世面上基本是有两种&#xff1a;碳素墨水和非碳素。碳素墨水相对比较堵笔&#xff0c;碳素墨水对钢笔本身腐蚀性不大&#xff0c;腐蚀性大的那是染料/颜料墨水。碳素墨水写字非常容易有笔锋&#xff0c;而非碳素墨水就显得略微柔和了。有人说&#xff0c;字写得好的人用…

html ctf查找,Web CTF 解题思路总结—南京邮电大学攻防平台writeup

1、直接查看源代码例&#xff1a;签到题(50)2、PHP的特性(1)MD5 碰撞例&#xff1a;md5 collision(50)md5碰撞&#xff1a;MD5摘要算法可以从多个字节组成的串中计算出由32个字节构成的“特征串”&#xff0c;对于超过32字节的串来说&#xff0c;MD5计算得出的值必然是其一个子…

java 1.8新增功能_睡觉时:新增的Java 8新增功能

java 1.8新增功能自Java 8推出以来&#xff0c;最有趣的功能是什么&#xff1f; Java 8最近庆祝了它的第一个生日&#xff0c;其主要版本已经在一年多以前了。 这当然值得庆祝。 自从最初的Java 8版本问世以来&#xff0c;已经发布了六个更新。 这些更新中的某些元素是次要的…

C++ 为什么不加入垃圾回收机制

点击蓝字关注我们Java的爱好者们经常批评C中没有提供与Java类似的垃圾回收(Gabage Collector)机制(这很正常&#xff0c;正如C的爱好者有时也攻击Java没有这个没有那个&#xff0c;或者这个不行那个不够好)&#xff0c;导致C中对动态存储的官吏称为程序员的噩梦&#xff0c;不是…

c++ 共享内存_Python3.8多进程之共享内存

最近发了个宏愿想写一个做企业金融研究的Python框架。拖出Python一看已经更新到了3.8&#xff0c;于是就发现了Python 3.8里新出现的模块&#xff1a;multiprocessing.shared_memory。随手写了个测试。生成一个240MB大小的pandas.DataFrame&#xff0c;然后转换成numpy.recarra…

计算机主机箱外部介绍图,电脑的主机结构是怎样的 电脑主机结构图【图文】...

在电脑已经普及的今天&#xff0c;基本上每家每户都有电脑了&#xff0c;大家用它来看电影&#xff0c;搜索资料啊&#xff0c;上网啊等等。在我们日常的娱乐方式中&#xff0c;电脑也是我们的娱乐项目之一&#xff0c;至少还是好多人用它看电影和追剧的。但是机器会有故障的时…