没有合适的资源?快使用搜索试试~ 我知道了~
canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性:width和height,用来设定画布的宽和高,如果没有通过标签属性或者脚本来设置,默认为300*150; 好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var c
资源推荐
资源详情
资源评论
使用使用JavaScript+canvas实现图片裁剪实现图片裁剪
canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制,图像处
理甚至实现简单的动画和游戏制作。
canvas标签只有两个属性:width和height,用来设定画布的宽和高,如果没有通过标签属性或者脚本来设置,默认为
300*150;
好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码:
代码如下:
var selectObj = null;
function ImageCrop(canvasId, imageSource, x, y, width, height) {
var canvas = $(“#” + canvasId);
if (canvas.length == 0 && imageSource) {
return;
}
function canvasMouseDown(e) {
StopSelect(e);
canvas.css(“cursor”, “default”);
}
function canvasMouseMove(e) {
var canvasOffset = canvas.offset();
var pageX = e.pageX || event.targetTouches[0].pageX;
var pageY = e.pageY || event.targetTouches[0].pageY;
iMouseX = Math.floor(pageX – canvasOffset.left);
iMouseY = Math.floor(pageY – canvasOffset.top);
canvas.css(“cursor”, “default”);
if (selectObj.bDragAll) {
canvas.css(“cursor”, “move”);
canvas.data(“drag”, true);
var cx = iMouseX – selectObj.px;
cx = cx < 0 ? 0 : cx;
mx = ctx.canvas.width – selectObj.w;
cx = cx > mx ? mx : cx;
selectObj.x = cx;
var cy = iMouseY – selectObj.py;
cy = cy < 0 ? 0 : cy;
my = ctx.canvas.height – selectObj.h;
cy = cy > my ? my : cy;
selectObj.y = cy;
}
for (var i = 0; i < 4; i++) {
selectObj.bHow[i] = false;
selectObj.iCSize[i] = selectObj.csize;
}
// hovering over resize cubes
if (iMouseX > selectObj.x – selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh &&
iMouseY > selectObj.y – selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) {
canvas.css(“cursor”, “pointer”);
selectObj.bHow[0] = true;
selectObj.iCSize[0] = selectObj.csizeh;
}
if (iMouseX > selectObj.x + selectObj.w – selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh
&&
iMouseY > selectObj.y – selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) {
canvas.css(“cursor”, “pointer”);
selectObj.bHow[1] = true;
selectObj.iCSize[1] = selectObj.csizeh;
}
if (iMouseX > selectObj.x + selectObj.w – selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh
&&
iMouseY > selectObj.y + selectObj.h – selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh)
{
canvas.css(“cursor”, “pointer”);
selectObj.bHow[2] = true;
selectObj.iCSize[2] = selectObj.csizeh;
}
资源评论
weixin_38655496
- 粉丝: 5
- 资源: 933
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功