使用JavaScript+canvas实现图片裁剪 - CSDN文库

69 浏览量更新于2023-05-04 2 收藏 45KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

使用使用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;

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38655496

粉丝: 5
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈