canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅!
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
这句话的执行过程可以这么理解:
首先是绘制一幅图像,这幅图像的宽和高就是图像实际的宽和高!
然后开始裁剪,sx sy是裁剪的起始位置,swidth和sheight是裁剪的高度和宽度,注意限制一下最大值,不要超出图片的高度和宽度;
这样图片就裁剪好了,然后就是放到画布上。如何放置,请继续看下去... ...
后四个参数,实际上是在画布中开辟一个区域,用于放置裁剪下来的图像!
正常来说应该图像应该是充满整个区域的,奇葩的是偶尔会遇见图像不充满的情况,理解如下:
仅仅是一个区域,并不代表图像的实际大小,如果图像小,可能会有一部分空白(即未使用),如果大,则不会超出去!
【开源】canvas图像裁剪、压缩、旋转
前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...
canvas图像裁剪、压缩、旋转
转载于:http://www.cnblogs.com/dailc/p/7843204.html 前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求.考虑到已有各轮子的契合度都不高,于是自己 ...
PHP图像裁剪为任意大小的图像,图像不变形,不留下空白
【HTML5】Canvas图像
把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象. 显示一个canvas图像: &l ...
php 图像裁剪(自定义裁剪图片大小)
canvas图像保存
很多时候绘制完成的图片需要保存,那么我们就可以使用到Canvas API来完成这最后一步! Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载,然后我们 ...
jQuery Jcrop 图像裁剪
jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...
mui---调用图像裁剪android
mui调用图像裁剪android: var IMAGE_UNSPECIFIED = "image/*"; //相册显示的文件类型 var PHOTOZOOM = 2; // 获取完 ...
如何实现Canvas图像的拖拽、点击等操作
上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...
随机推荐
iOS中 视频直播功能-流媒体的使用(详解)韩俊强的CSDN博客
上一篇博客:(流媒体实现视频播放和下载功能):http://blog.csdn.net/qq_31810357/article/details/50574914 最近视频直播功能比较火,处于需求,研究 ...
关于Filezilla是否支持sftp
我们知道filezilla是一个开源的ftp的解决方案,它提供了客户端和服务器端,支持的fpt, sftp, ftps,这是你可以从wiki中看到的关于filezilla的介绍,但是这里需要澄清一点就 ...
EGOImageView的使用方法及注意事项
1.下载EGOImageView及其相关的类库 EGOImageLoading 将EGOCache.EGOImageButton.EGOImageView.EGOImageLoader全部添加到工程下 ...
杭电ACM 2052 Picture
Picture Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
webpack以及loader 加载命令
module.exports={ entry:'./main/main.js', output:{ path:'./build', filename:'bundle.js' }, module:{ l ...
numpy 库使用
numpy 库简单使用 一.numpy库简介 Python标准库中提供了一个array类型,用于保存数组类型的数据,然而这个类型不支持多维数据,不适合数值运算.作为Python的第三方库numpy便有 ...
java开发mis系统所需技术及其作用
MIS(管理信息系统--Management Information System)系统 ,是一个由人.计算机及其他外围设备等组成的能进行信息的收集.传递.存贮.加工.维护和使用的系统. 是一门新兴的 ...
LeetCode题解之Binary Tree Paths
1.题目描述 2.分析 使用递归. 3.代码 vector ans; vector binaryTreePaths(TreeNode* root ...
SpringBoot 使用okhttp3
1.添加pom.xml依赖 com.squareup.okhttp3
Spring整合Redis&;JSON序列化&;Spring/Web项目部署相关
几种JSON框架用法和效率对比: https://blog.csdn.net/sisyphus_z/article/details/53333925 https://blog.csdn.net/wei ...