canvas实现图片剪切


前言

在学习原生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中实现了。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Android中,可以通过自定义View的方式来实现图片剪切圆角的效果。以下是一个简单的示例代码: 1. 自定义一个RoundImageView类,继承自ImageView: ``` public class RoundImageView extends ImageView { private Paint mPaint; private RectF mRectF; private float mRadius; public RoundImageView(Context context) { this(context, null); } public RoundImageView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mPaint = new Paint(); mRectF = new RectF(); mPaint.setAntiAlias(true); } @Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (drawable == null) { super.onDraw(canvas); return; } if (getWidth() == 0 || getHeight() == 0) { return; } Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap(); Bitmap roundBitmap = getRoundBitmap(bitmap, getWidth(), getHeight(), mRadius); mPaint.reset(); canvas.drawBitmap(roundBitmap, 0, 0, mPaint); } private Bitmap getRoundBitmap(Bitmap bitmap, int width, int height, float radius) { Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); mRectF.set(0, 0, width, height); canvas.drawRoundRect(mRectF, radius, radius, mPaint); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, null, mRectF, mPaint); return output; } public void setRadius(float radius) { this.mRadius = radius; invalidate(); } } ``` 2. 在xml布局文件中引用这个RoundImageView: ``` <com.example.RoundImageView android:id="@+id/iv_round" android:layout_width="100dp" android:layout_height="100dp" android:scaleType="centerCrop" android:src="@drawable/test" app:radius="20dp"/> ``` 3. 在Activity中找到这个RoundImageView,并调用setRadius()方法设置圆角半径: ``` RoundImageView roundImageView = findViewById(R.id.iv_round); roundImageView.setRadius(20); ``` 这样就可以实现在Android中对图片进行圆角剪切的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值