前言

在学习原生canvas，顺便做一个canvas进行图片剪切的小练习，加深自己对canvas的理解。计划做一个很简单很简单版的小demo，主要使用到canvas元素和一些鼠标监听事件。

小demo: http://121.4.85.237:7778/

思路分析

1 图片可以在canvas上进行绘制
2 绘制的图片在canvas中可以随意拖动(重绘)
3 图片也要支持放大与缩小(重绘)
4 点击图片裁剪按钮可进行图片导出
5 canvas画布最好支持响应式

绘制图片

主要使用到了canvas中自带的drawImage()方法，该方法的形参含义自行去官网了解，只有自己去了解才能印象深刻。
这里还有两个注意点，一是在vue框架中，当引入的图片路径是本地路径时，要使用require的方法引入；第二个是要是image的onload函数触发时(图片加载完成)进行图片绘制。

this.canvas = document.querySelector("#mycanvas");
this.ctx = this.canvas.getContext("2d");this.image = new Image();
this.image.src = require("./sss.jpg");
this.image.onload = () => {this.drawImage(); // 绘制图片
};
drawImage() {// 再次绘制前要进行清除之前的绘制this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.drawImage(this.image,0,0,this.image.width,this.image.height,this.imageX,this.imageY,this.image.width * this.imageScale,this.image.height * this.imageScale);
},

mousedown

给canvas添加鼠标按下事件，以此来判断绘制在canvas上的图片是否可以移动(就是重绘的意思)，并在可以移动时改变鼠标样式。

this.canvas.onmousedown = (e) => {this.downpos = this.windowToCanvas(e.clientX, e.clientY);if (this.downpos.x > this.imageX && this.downpos.y > this.imageY) {this.move = true;this.canvas.style.cursor = "pointer";}
};

mousemove

在可以移动的情况下进行图片偏移计算，并进行重绘。
这里计算出的偏移量，是用来绘制图片时做为坐标的起始点的。

this.canvas.onmousemove = (e) => {const mouseX = e.clientX;const mouseY = e.clientY;if (mouseX > this.canvas.getBoundingClientRect().left ||mouseY > this.canvas.getBoundingClientRect().top) {if (this.move) {this.movePos = this.windowToCanvas(mouseX, mouseY);const x = this.movePos.x - this.downpos.x;const y = this.movePos.y - this.downpos.y;this.imageX += x;this.imageY += y;this.drawImage();this.downpos = JSON.parse(JSON.stringify(this.movePos));}}
};

mouseup

鼠标抬起事件中进行各个属性值的 reset 。

document.onmouseup = (e) => {this.canvas.style.cursor = "default";this.downPos = null;this.movePos = null;this.move = false;
};

图片裁剪

使用canvas.toDataURL()方法即可。

caijian() {let imgUrl = this.canvas.toDataURL("image/jpeg", 1.0);let a = document.createElement("a");a.download = "caijian.jpeg";a.href = imgUrl;document.body.appendChild(a);a.click();document.body.removeChild(a);
},

画布响应式

这个很简单，就是监听window.onresize事件，这里不写了，demo中实现了。

canvas实现图片剪切相关推荐

php图片特效,php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
本文实例讲述了php_imagick实现图片剪切.旋转.锐化.减色或增加特效的方法.分享给大家供大家参考.具体分析如下: 一个可以供PHP调用ImageMagick功能的PHP扩展.使用这个扩展可以使 ...
UWP 图片剪切旋转工具
原文:UWP 图片剪切旋转工具好久没撸随笔了,明天终于放假休息了..准备去进行信仰充值,看<魔兽>去(话说surface phone 好久出,让我这个做UWP的也充点信仰..) 先上下效 ...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
android 拍照图片剪切
对于照片拍照上传应该有很多新手不是很清楚,这里我把我多方学习的代码分享给大家. 图片剪切代码上传这里是拍照不裁剪的代码 package com.rui.cameratest;import java ...
小程序_图片剪切功能（支持多图片上传）
前端图片剪切上传功能是常见的功能,在开发过程中,研发一个这样的功能要花的时间也会很多,现在把一个研发好了的图片剪切插件发出来.支持剪切和大小缩放. wxml 1  ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
ios UIImage 圆形图片剪切方案
@interface UIImage (Resize)//按形状切割图像 - (UIImage*)cutImageWithRadius:(int)radius;@end //图片剪切 - (UIIma ...
图片剪切空指针崩溃问题在Android 6.0系统出现
软件在上传头像的时候有个图片剪切功能,本来一直没有问题的,后来公司有个同事买了部nexus手机,运行后发现图片剪切后崩溃,后来发现问题并解决在这里记录一下 public static Bitmap ...
解决Canvas.toDataURL 图片跨域问题
解决Canvas.toDataURL 图片跨域问题参考文章: (1)解决Canvas.toDataURL 图片跨域问题 (2)https://www.cnblogs.com/ajg016/p/547 ...
opencv 图片剪切
1 import cv2 as cv 2 import numpy as np 3 4 # 图片剪切 5 img = cv.imread('../images/moon.jpg', flags=1) ...

canvas实现图片剪切

文章目录

前言