Html5新特性 canvas画板画直线和等比缩放居中裁剪图片_canvas图片放大后居中裁剪-程序员宅基地

技术标签: Java开发笔记  JavaEE开发  canvas  html5  图片等比缩放  图片裁剪  

下面介绍一下canvas的几种使用方法,画直线和裁剪图片;

canvas裁剪图片

  h5的这个新特性,我们可以使用canvas进行图片的处理,比如裁剪,等比放大或缩小。比如我们有个360x607宽高的目标图,如果上传图片的宽高都大于目标图,我们对目标图等比压缩,然后在剧中裁剪;如果又一边小于,我们就对上传图片等比放大,让其都满足目标大小,再居中裁剪。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数。

所以canvas既可以操作canvas,image,video。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; ch
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fengshizty/article/details/25790397

智能推荐

Android音乐播放器的设计与实现-程序员宅基地

文章浏览阅读2.8k次,点赞2次,收藏14次。目录应用开发技术及开发平台介绍应用需求分析应用功能设计及其描述应用UI展示一、应用开发技术及平台介绍  ①开发技术:  本系统是采用面向对象的软件开发方法,基于Android studio开发平台,以Android作为本系统的开发语言实现音乐播放器预定的需求功能。  ②平台介绍硬件平台  CPU奔腾双核 (主频2.0GHz)  ..._安卓stdio音乐播放器需求分析

【YOLOV5-6.x讲解】DIY实验文件 models/experimental.py_model.append(ckpt['ema' if ckpt.get('ema') else 'm-程序员宅基地

文章浏览阅读3k次,点赞3次,收藏13次。现在YOLOV5已经更新到6.X版本,现在网上很多还停留在5.X的源码注释上,因此特开一贴传承开源精神!5.X版本的可以看其他大佬的帖子本文章主要从6.X版本出发,主要解决6.X版本的项目注释与代码分析!【YOLOV5-6.x 版本讲解】整体项目代码注释导航。......_model.append(ckpt['ema' if ckpt.get('ema') else 'model'].float().fuse().eval

Ubuntu系统通用快捷键_ubuntu切换输入法快捷键-程序员宅基地

文章浏览阅读2.3k次。文章内容若无特殊说明,则默认为Ubuntu 20.04 LTS系统。Ubuntu系统通用快捷键,包括系统快捷键、输入法快捷键、窗口快捷键、截图快捷键、命令行快捷键、等等。_ubuntu切换输入法快捷键

深度学习理论方法 —— 相似度计算_深度学习相似度公式-程序员宅基地

文章浏览阅读3.1k次。基于欧几里得距离的相似度计算【公式1】:欧几里得计算公式作为计算结果的欧式值显示的是两点之间的直线距离,该值的大小表示两个物品或者用户差异性的大小,即用户的相似性如何。如果两个物品或者用户距离越大,那么相似性越小;反之,距离越小相似度越大。由于欧几里得相似度计算中最终数值的大小和相似度成反比,因此在实际中常常使用欧几里得距离的倒数作为相似度值,即1/d+1作为近似值。【例子1】:欧几里得公式的应用 物品1(特征1) 物品2(特征2) 物品3(特征3) 物品4(特._深度学习相似度公式

95 后程序员一出校门就拿年薪 32 万?-程序员宅基地

文章浏览阅读234次。原文出处:https://blog.csdn.net/csdnnews/article/details/83114697金九银十校招季,国庆假期前后,部分一线互联网公司已经争分夺秒地发出了第一批校招 offer。一个残酷的事实是:还未跨出校门的 95 后,已开始用惊人的高薪,碾压在职场上「头秃」的 90 后了。 校招是企业抢夺高潜人才的黄金时期,校招薪资也会逐步影响社招市场的薪资走向。值此一年一度..._南京年薪32万 知乎

sgu 103 Traffic Lights_in the city of dingilville the traffic is arranged-程序员宅基地

文章浏览阅读829次。题目描述:103. Traffic LightsTime limit per test: 0.5 second(s)Memory limit: 4096 kilobytesinput: standardoutput: standardIn the city of Dingilville the traffic is arranged in an un_in the city of dingilville the traffic is arranged in an unusual way. there

随便推点

c++调用python numpy编程_c++ numpy-程序员宅基地

文章浏览阅读1.7w次,点赞14次,收藏101次。背景现在用c++重构了python工程,有一部分后处理不想再花时间重构了,所以直接拿过来调用。边搜资料边做的,做这个demo花了些时间,所以记下来以防忘记。资料找了很多的c++调用python的方法,首先可以肯定的有不止一种方式,直接使用python库、numpy arrayobject库来做;另外一种是使用boost/python boost/numpy的方式。后一种没有调通,是链接库的问..._c++ numpy

串口协议和RS-232标准,RS232电平与TTL电平的区别,以及USB/TTL转232“模块(CH340芯片为例)的工作原理_usb cdc驱动和232-程序员宅基地

文章浏览阅读3.1k次。前言本文主要介绍串口通讯协议和RS-232的介绍以及USB/TTL转232模块的工作原理一、串口通讯协议和RS-2321.简介串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式,因为它简单、便捷,因此大部分电子设备都支持该通讯方式,电子工程师在调试设备时也经常使用该通 讯方式输出调试信息。2.RS-232 标准RS-232 标准主要规定了信号的用途,通讯接口以及信号的电平标准。在上面的通讯方式中,两个通讯设备的“DB9接口”之间通过串._usb cdc驱动和232

IIS7 经典模式和集成模式的区别-程序员宅基地

文章浏览阅读120次。IIS7.0中的Web应用程序有两种配置模式:经典模式和集成模式。经典模式是为了与之前的版本兼容,使用ISAPI扩展来调用ASP.NET运行库,原先运行于IIS6.0下的Web应用程序迁移到IIS7.0中只要将应用程序配置成经典模式,代码基本不用修改就可以正常运行。集成模式是一种统一的哀求处理管道,它将ASP.NET请求管道与IIS核心管道组合在一起,这种模式能够提供更好的性能,能够实现..._经典和集成的区别

ee er_61对词根相同后缀分别是er和ee的单词要这样区别记忆它们-程序员宅基地

文章浏览阅读4.4k次。先看两个单词:employer和employee。它们之间差别就是最后一个字母。很熟悉吧!雇主?雇工?糊涂了吧!高中学过这两个单词!那时可能是死记,过后有印象但意思却混淆糊涂了!其实我们回忆一下:employer哦,employer就是雇主、老板。其实雇主、老板就是这个派头:严肃、威严、不苟言笑employeeemployee是雇员、员工之意。其实雇员、雇工就是这个样子:双眼要有神,要目不转睛看着..._以ee和er结尾的单词成对

如何制作炫彩的WS2812B灯球_ws2812球-程序员宅基地

文章浏览阅读1.8k次,点赞3次,收藏11次。如上图所示,就是使用ws2812b做的灯球,非常漂亮,非常炫酷。下面就说说具体的制作方法。材料清单:5050封装ws2812b灯珠;模具;arduino nano;锂电池;锂电池充电管理模块;升压模块;裸铜丝;漆包线;导线若干。工具:" class="reference-link">工具:电烙铁、松香、焊油、镊子、锡丝等等。制作步骤:1、建模 使用3D软件构建模具的模型,具体的构建方法可以查看这两个视频。freecad创建灯球模具模型diy ws2812灯球._ws2812球

VINS学习01——VINS_Fusion官方教程翻译解读_mh_01_easy.bag-程序员宅基地

文章浏览阅读2.5k次,点赞3次,收藏34次。VINS_Fusion 是一个基于优化的多传感器融合定位算法,由港科大开源,在VINS_Fusion基础上改进。融合传感器包括:IMU,双目相机,GPS_mh_01_easy.bag

推荐文章

热门文章

相关标签