HTML canvas图像裁剪
canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅!
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
这句话的执行过程可以这么理解:
首先是绘制一幅图像,这幅图像的宽和高就是图像实际的宽和高!
然后开始裁剪,sx sy是裁剪的起始位置,swidth和sheight是裁剪的高度和宽度,注意限制一下最大值,不要超出图片的高度和宽度;
这样图片就裁剪好了,然后就是放到画布上。如何放置,请继续看下去... ...
后四个参数,实际上是在画布中开辟一个区域,用于放置裁剪下来的图像!
正常来说应该图像应该是充满整个区域的,奇葩的是偶尔会遇见图像不充满的情况,理解如下:
仅仅是一个区域,并不代表图像的实际大小,如果图像小,可能会有一部分空白(即未使用),如果大,则不会超出去!
HTML canvas图像裁剪的更多相关文章
- 【开源】canvas图像裁剪、压缩、旋转
前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...
- canvas图像裁剪、压缩、旋转
转载于:http://www.cnblogs.com/dailc/p/7843204.html 前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求.考虑到已有各轮子的契合度都不高,于是自己 ...
- PHP图像裁剪为任意大小的图像,图像不变形,不留下空白
<?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...
- 【HTML5】Canvas图像
把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象. 显示一个canvas图像: <!DOCTYPE html> &l ...
- php 图像裁剪(自定义裁剪图片大小)
<?php /** * 图像裁剪 * @param $title string 原图路径 * @param $content string 需要裁剪的宽 * @param $encode str ...
- 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在我的理解 ...
随机推荐
- Ajax实现xml文件数据插入数据库(二)--- ajax实现与jsp的数据交互。
在上一篇文章中我们成功得到了重新组织后的数据,接下来需要做的便是将数据插入到数据库中了.在与数据库打交道的过程中有一些方法是普遍的,我们将这些通用方法封装到一个DbUtil类中,以便复用,封装好的Db ...
- Android中检测软键盘的弹出和关闭
Android系统并没有提供明显的API来监听软键盘的弹出和关闭,但是在某些情况下我们还是有办法来检测软键盘的弹出和关闭. 从StackOverflow找到了一个不错的方法.但是这种只适用于在mani ...
- ***网Web前端开发规范(初稿)
这几天一直在梳理关于前端方面的开发规范,现在暂时梳理了HTML的开发规范,暂且放置于此! 规范目的: 使开发流程更加规范化 文件命名规范:(需审批) 1.项目命名 全部采用小写方式, 以下划线分隔. ...
- 关于Ueditor 前后端分离实现文件上传到独立服务器的问题 望大神们赐教
最近,由于网站实现多台服务器负载均衡,导致编辑器上传文件需要同步,可是使用同步软件太慢,不太现实,所以想到实现编辑器上传文件直接上传到独立文件服务器.可是没想到遇到坑了. 1.在本地IIS 中添加网站 ...
- MVC源码解析 - Http Pipeline 解析(上)
IHttpHandler applicationInstance = HttpApplicationFactory.GetApplicationInstance(context); 上一篇说到了创建 ...
- 竞争激烈的洗衣O2O
今日,洗衣O2O干洗客宣布已获得千万美金Pre-A轮融资,投资方为新加坡某资本,具体信息尚不便透露. “干洗客”是36氪此前报道过的洗衣O2O服务商,2013年7月诞生于上海,2014年12月经历重组 ...
- Jdon框架开发指南
Jdon框架快速开发指南 开发主要步骤如下: JdonFramework6.0以上两步开发见这里. 快速配置指南 新增/查询/修改/删除(CRUD); 批量查询和分页显示 本文Step By Step ...
- 批处理+组策略 实现规定时间段无法开机and定时关机
某爱熬夜的人对付自己的东西 1.shutdown命令 shutdown -a #取消现有的shutdown计划 shutdown -s -t [time] #设定时间关机 shutdown -r -t ...
- mysql报错1024-can't get hostname for your address
前一段时间mysql用的好好的,突然一天,mysql启动后,在使用navicat连接数据库的时候 报错1024-can't get hostname for your address 这里我是这样解决 ...
- OBJECT-ORIENTED