【canvas】canvas的综合运用：图片裁剪

于 2024-04-12 17:06:18 发布
阅读量1.2k 收藏 6
点赞数 35
分类专栏： 前端 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43231248/article/details/137686447
版权

简言

使用canvas实现图片裁剪功能。
在这里插入图片描述

图像裁剪

图像裁剪是一个比较常见的功能,使用canvas的相关方法和属性可以实现简易的图片裁剪功能。

功能分析

  1. 上传图片
  2. 图片显示
  3. 绘制裁剪框
  4. 裁剪操作
  5. 生成预览
  6. 提供下载

上传图片

使用input的file类型的元素可以上传图片文件数据，然后转成base64供使用。

 file.addEventListener('change', (e) => {
      const file = e.target.files[0];
      
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        img.src = e.target.result;
        img.onload = () => {
          console.log(img.width, img.height);
          //  更新图片缩放比例
          if (img.width > img.height) {
            scale = 500 / img.width
          } else {
            scale = 500 / img.height
          }
          drawOperatingLine()
        }

      }
    })

图片显示

canvas的drawImage()方法可以接收一个img元素来显示图片。
我这边canvas固定宽高了，所以做了缩放。

  ctx.clearRect(0, 0, origin.width, origin.height)
      //  绘制图像
      dx = (origin.width - scale * img.width) / 2 //  图片偏移 x
      dy = (origin.height - scale * img.height) / 2 //  图片偏移 y
      dw = scale * img.width
      dh = scale * img.height
      ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);

绘制裁剪框

主要绘制半透明蒙层和裁剪框，以及四周边缘点。

理想情况下是使用canvas的globalCompositeOperation（组合）实现，可以绘制多样性裁剪框

在这里插入图片描述

  //  透明度50%蒙版
      ctx.save()

      ctx.fillStyle = 'rgba(0,0,0,0.4)';
      ctx.fillRect(0, 0, origin.width, initY);
      ctx.fillRect(0, endY, origin.width, origin.height - initY);
      ctx.fillRect(0, initY, initX, endY - initY);
      ctx.fillRect(endX, initY, origin.width - endX, endY - initY);
      ctx.restore()


      // 边缘线
      ctx.save()
      ctx.strokeStyle = 'red';
      ctx.setLineDash([5, 5])
      ctx.moveTo(initX, initY);
      ctx.lineTo(endX, initY);
      ctx.lineTo(endX, endY);
      ctx.lineTo(initX, endY);
      ctx.closePath();
      ctx.stroke();
      // 矩形四周点
      ctx.fillStyle = '#fff';
      ctx.fillRect(initX - 5, initY - 5, 10, 10);
      ctx.fillRect(endX - 5, initY - 5, 10, 10);
      ctx.fillRect(endX - 5, endY - 5, 10, 10);
      ctx.fillRect(initX - 5, endY - 5, 10, 10);
      ctx.beginPath();
      ctx.restore()

裁剪操作

裁剪操作有：

  • 操作边缘线改变裁剪框大小
  • 操作四周边缘点改变裁剪框大小
  • 操作裁剪框中间移动裁剪框

改变裁剪框位置和大小需要按下、移动、抬起三个事件。

操作后记得及时更新画布

   origin.addEventListener("mousedown", (e) => {
      if (now !== 0) {
        modify = true
        lastX = e.offsetX
        lastY = e.offsetY
      }
    });
    origin.addEventListener("mousemove", (e) => {
      if (!ctx) return

      let x = e.offsetX
      let y = e.offsetY
      //  判定类型
      if ((x > initX + 5 && x < endX - 5) && (y < initY + 5 && y > initY - 5)) {  //  上边
        origin.style.cursor = 'ns-resize'
        now = 1
      } else if ((x < endX + 5 && x > endX - 5) && (y > initY + 5 && y < endY - 5)) {  //  右边
        origin.style.cursor = 'ew-resize'
        now = 2

      } else if ((x > initX + 5 && x < endX - 5) && (y < endY + 5 && y > endY - 5)) {  //  下边
        origin.style.cursor = 'ns-resize'
        now = 3

      } else if ((x < initX + 5 && x > initX - 5) && (y > initY + 5 && y < endY - 5)) {  //  左边
        origin.style.cursor = 'ew-resize'
        now = 4

      } else if (x <= initX + 5 && x >= initX - 5 && y <= initY + 5 && y >= initY - 5) { //  左上角
        origin.style.cursor = 'nwse-resize'
        now = 5

      } else if (x <= endX + 5 && x >= endX - 5 && y <= endY + 5 && y >= endY - 5) { //  右下角
        origin.style.cursor = 'nwse-resize'
        now = 6

      } else if (x <= endX + 5 && x >= endX - 5 && y <= initY + 5 && y >= initY - 5) { //  右上角
        origin.style.cursor = 'nesw-resize'
        now = 7

      } else if (x <= initX + 5 && x >= initX - 5 && y <= endY + 5 && y >= endY - 5) { //  左下角
        origin.style.cursor = 'nesw-resize'
        now = 8
      }
      else if (x > initX + 5 && x < endX - 5 && y > initY + 5 && y < endY - 5) { //  移动
        origin.style.cursor = 'all-scroll'
        now = 9
      }
      else {
        origin.style.cursor = 'auto'
        now = 0
      }
      //  若在拖动根据类型更改值
      if (modify) {
        switch (now) {
          case 1: //  上边
            initY = e.offsetY
            break
          case 2: //  右边
            endX = e.offsetX
            break
          case 3: //  下边
            endY = e.offsetY
            break
          case 4: //  左边
            initX = e.offsetX
            break
          case 5: //  左上角
            initX = e.offsetX
            initY = e.offsetY
            break
          case 6: //  右下角
            endY = e.offsetY
            endX = e.offsetX
            break
          case 7: //  右上角
            endX = e.offsetX
            initY = e.offsetY
            break

          case 8: //  左下角
            initX = e.offsetX
            endY = e.offsetY
            break
          case 9: //  左下角
            let vx = e.offsetX - lastX
            let vy = e.offsetY - lastY

            initX += vx
            endX += vx

            initY += vy
            endY += vy

            //  更新
            lastX = e.offsetX
            lastY = e.offsetY
            break


        }
        //  更新

        drawOperatingLine()
      }
    })
    origin.addEventListener('mouseup', (e) => {
      if (modify) {
        modify = false

      }
    })

生成预览

我实现的是预览要裁剪后的原图片部分内容。
使用另外一个canvas来绘制img元素的裁剪包含部分。

有缩放的话，注意还原

在这里插入图片描述

下载裁剪后图片

canvas有一个toDataURL()方法可以将canvas转成base64数据。

 btn.onclick = () => {

      //  生成图片
      let imgData = canvas.toDataURL('image/png', 1)
      let a = document.createElement('a')
      a.href = imgData
      a.download = 'image.png'
      a.click()
    }

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图像剪辑</title>
  <style>
    html,
    body {
      width: 100vw;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .box {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 24px;
    }

    .box-content {
      margin-top: 16px;
      box-sizing: border-box;
      width: 100%;
      /* height: 500px; */
      /* display: flex; */
      align-items: center;
      border: 1px solid #000;
    }

    #origin {
      width: 500px;
      height: 500px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>
      <h1>图像剪辑</h1>
      <input type="file" name="file" id="file">

    </div>
    <div class="box-content">
      <canvas id="origin" width="500" height="500">
      </canvas>
      <div>
        <div>预览：</div>
        <canvas id="canvas">
        </canvas>
      </div>
    </div>
    <div>
      <button id="btn">下载裁剪后的内容</button>
    </div>
  </div>
  <script>
    const file = document.getElementById('file');
    const origin = document.getElementById('origin');
    const canvas = document.getElementById('canvas')
    const btn = document.getElementById('btn');
    const ctx = origin.getContext('2d');
    const img = document.createElement('img');
    //  缩放
    let scale = 1 //  图片缩放比例
    let dx = 0 //  图片偏移 x
    let dy = 0//  图片偏移 y
    let dw = origin.width
    let dh = origin.height
    //  裁剪位置
    let initX = 50
    let initY = 50
    let endX = origin.width - initX
    let endY = origin.height - initY
    //  裁剪状态
    let now = 0;
    let modify = false
    let lastX = 0, lastY = 0

    origin.addEventListener("mousedown", (e) => {
      if (now !== 0) {
        modify = true
        lastX = e.offsetX
        lastY = e.offsetY
      }
    });
    origin.addEventListener("mousemove", (e) => {
      if (!ctx) return

      let x = e.offsetX
      let y = e.offsetY
      //  判定类型
      if ((x > initX + 5 && x < endX - 5) && (y < initY + 5 && y > initY - 5)) {  //  上边
        origin.style.cursor = 'ns-resize'
        now = 1
      } else if ((x < endX + 5 && x > endX - 5) && (y > initY + 5 && y < endY - 5)) {  //  右边
        origin.style.cursor = 'ew-resize'
        now = 2

      } else if ((x > initX + 5 && x < endX - 5) && (y < endY + 5 && y > endY - 5)) {  //  下边
        origin.style.cursor = 'ns-resize'
        now = 3

      } else if ((x < initX + 5 && x > initX - 5) && (y > initY + 5 && y < endY - 5)) {  //  左边
        origin.style.cursor = 'ew-resize'
        now = 4

      } else if (x <= initX + 5 && x >= initX - 5 && y <= initY + 5 && y >= initY - 5) { //  左上角
        origin.style.cursor = 'nwse-resize'
        now = 5

      } else if (x <= endX + 5 && x >= endX - 5 && y <= endY + 5 && y >= endY - 5) { //  右下角
        origin.style.cursor = 'nwse-resize'
        now = 6

      } else if (x <= endX + 5 && x >= endX - 5 && y <= initY + 5 && y >= initY - 5) { //  右上角
        origin.style.cursor = 'nesw-resize'
        now = 7

      } else if (x <= initX + 5 && x >= initX - 5 && y <= endY + 5 && y >= endY - 5) { //  左下角
        origin.style.cursor = 'nesw-resize'
        now = 8
      }
      else if (x > initX + 5 && x < endX - 5 && y > initY + 5 && y < endY - 5) { //  移动
        origin.style.cursor = 'all-scroll'
        now = 9
      }
      else {
        origin.style.cursor = 'auto'
        now = 0
      }
      //  若在拖动根据类型更改值
      if (modify) {
        switch (now) {
          case 1: //  上边
            initY = e.offsetY
            break
          case 2: //  右边
            endX = e.offsetX
            break
          case 3: //  下边
            endY = e.offsetY
            break
          case 4: //  左边
            initX = e.offsetX
            break
          case 5: //  左上角
            initX = e.offsetX
            initY = e.offsetY
            break
          case 6: //  右下角
            endY = e.offsetY
            endX = e.offsetX
            break
          case 7: //  右上角
            endX = e.offsetX
            initY = e.offsetY
            break

          case 8: //  左下角
            initX = e.offsetX
            endY = e.offsetY
            break
          case 9: //  左下角
            let vx = e.offsetX - lastX
            let vy = e.offsetY - lastY

            initX += vx
            endX += vx

            initY += vy
            endY += vy

            //  更新
            lastX = e.offsetX
            lastY = e.offsetY
            break


        }
        //  更新

        drawOperatingLine()
      }
    })
    origin.addEventListener('mouseup', (e) => {
      if (modify) {
        modify = false

      }
    })

    file.addEventListener('change', (e) => {
      const file = e.target.files[0];

      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        img.src = e.target.result;
        img.onload = () => {
          console.log(img.width, img.height);
          //  更新图片缩放比例
          if (img.width > img.height) {
            scale = 500 / img.width
          } else {
            scale = 500 / img.height
          }
          drawOperatingLine()
        }

      }
    })
    //  绘制裁剪控制图像
    function drawOperatingLine() {
      ctx.clearRect(0, 0, origin.width, origin.height)
      //  绘制图像
      dx = (origin.width - scale * img.width) / 2 //  图片偏移 x
      dy = (origin.height - scale * img.height) / 2 //  图片偏移 y
      dw = scale * img.width
      dh = scale * img.height
      ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);

      //  透明度50%蒙版
      ctx.save()

      ctx.fillStyle = 'rgba(0,0,0,0.4)';
      ctx.fillRect(0, 0, origin.width, initY);
      ctx.fillRect(0, endY, origin.width, origin.height - initY);
      ctx.fillRect(0, initY, initX, endY - initY);
      ctx.fillRect(endX, initY, origin.width - endX, endY - initY);
      ctx.restore()


      // 边缘线
      ctx.save()
      ctx.strokeStyle = 'red';
      ctx.setLineDash([5, 5])
      ctx.moveTo(initX, initY);
      ctx.lineTo(endX, initY);
      ctx.lineTo(endX, endY);
      ctx.lineTo(initX, endY);
      ctx.closePath();
      ctx.stroke();
      // 矩形四周点
      ctx.fillStyle = '#fff';
      ctx.fillRect(initX - 5, initY - 5, 10, 10);
      ctx.fillRect(endX - 5, initY - 5, 10, 10);
      ctx.fillRect(endX - 5, endY - 5, 10, 10);
      ctx.fillRect(initX - 5, endY - 5, 10, 10);
      ctx.beginPath();
      ctx.restore()
      //  生成预览
      preview()
    }

    //  生成预览
    function preview() {
      let lsx = initX < dx ? dx : initX
      let lsy = initY < dy ? dy : initY
      let lex = endX > dx + dw ? dx + dw : endX
      let ley = endY > dy + dh ? dy + dh : endY
      let sx = 0
      let sy = 0
      if (initX > dx + dw) {
        sx = img.width
      } else if (initX > dx) {
        sx = (initX - dx) / scale
      }
      if (initY > dy + dh) {
        sy = img.height
      } else if (initY > dy) {
        sy = (initY - dy) / scale
      }
      const sw = (lex - lsx) / scale //  实际图片裁剪宽度
      const sh = (ley - lsy) / scale  //  实际图片裁剪高度
      canvas.width = sw
      canvas.height = sh
      canvas.getContext('2d').drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh)
    }
    btn.onclick = () => {

      //  生成图片
      let imgData = canvas.toDataURL('image/png', 1)
      let a = document.createElement('a')
      a.href = imgData
      a.download = 'image.png'
      a.click()
    }
  </script>
</body>

</html>

在这里插入图片描述

结语

有一些边界情况要处理。例如，裁剪框边界情况，图片过小缩放后模糊情况等。

觉得有用的话，麻烦动动小手点个赞，关注一下吧！

ZSK6
关注
  • 35
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用JavaScript+canvas实现图片裁剪
12-11
canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150; 好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码： 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) {     var c
vue下canvas裁剪图片实例讲解
10-15
在本篇文章里小编给大家整理了关于vue下canvas裁剪图片实例讲解内容，需要的朋友们可以参考下。
使用canvas实现前端图片裁剪功能，以vue为例
exxes的博客
01-19 3349
今天和大家分享一下我个人使用canvas实现前端图片裁剪功能的方法，canvas算是前端进阶的一个必修课了，不太了解的同学可以先去找点资料打点基础，个人对canvas的理解就是把他类比成一个画图工具，在画图工具中我们是使用可视化的界面去画图，而在canvas里则是使用代码去实现我们在可视化界面的操作进而去画图wind-slayer-ui。
使用Canvas裁剪图片
weixin_60895836的博客
08-03 839
通过以上步骤，我们已经成功实现了使用Canvas来裁剪图片的功能。通过监听鼠标事件，我们可以在图片上绘制裁剪区域，并最终实现图片的裁剪效果。Canvas技术是Web前端开发中不可或缺的一部分，希望本篇博客能够帮助您更好地了解Canvas的应用场景和实践技巧。
Python基于tkinter canvas实现图片裁剪功能
01-19
实现：tkinter 画布上显示图片，按下鼠标左键并且移动，实现截图 代码如下 # -*- encoding=utf-8 -*- import os import tkinter as tk from PIL import Image from PIL import ImageTk left_mouse_down_x = 0 left_mouse_down_y = 0 left_mouse_up_x = 0 left_mouse_up_y = 0 sole_rectangle = None def left_mouse_down(event): # print('鼠标左键按下') g
使用canvas对图片进行裁切
热门推荐
苛学加记事
06-15 1万+
canvas canvas 又叫做画布，是 HTML5 新增内容，可以使用js脚本在其中绘制图像的元素。 常用于制作网页上的一些毕竟炫酷的前端特效。 可以完成图片处理、动画渲染、图表渲染等操作。 最近用uni-app的推流组件做了个已证件照拍摄的相机，但是拍照完成后还需要对图片进行裁切，才能真正使用。 今天就来看看如何使用canvas对图片进行剪切。 ...
canvas实现图像裁剪
Kaite_han的博客
04-24 4755
1.技术背景 随着都市类程序开发业务推进，在各类活动、个人信息等模块逐渐依赖图像裁剪、上传等功能，那么如何实现图像缩放、裁剪就成了前端工程师们关注优化的重点。 2.应用技术 本次使用的技术主要是依赖canvas,又叫画布，是H5新增内容，可以使用js脚本在其中绘制图像的元素。 可以完成图片处理、动画渲染、图表渲染等操作。 最近用uni-app的推流组件做了个图片裁切、上传的组件，拍照、选择照片完成后还需要对图片进行裁切，才能真正使用。 3.处理思路 使用两个canvas分别为操作canvas、目标canva
【vue】canvas图片剪切
前端学习记录
12-05 1357
对图片进行遮挡有 overflow: hidden、clip-path 以及 mask-image。 overflow是进行超出不显示，通过父元素遮挡超出部分。但是效果不理想。 clip-path是进行裁剪，但是裁剪之后image所占空间不会改变。在线工具 mask-image是进行image遮挡，没有实践，据说遮挡之后image所占空间不会改变。 最后，还是选择使用canvas进行裁剪工作。 image会存在底部有间隙的问题？ 解决办法：对image设置display:block;一、图片剪裁drawIm
使用canvas图片裁剪
LueLueLue77的博客
04-11 1689
最近在做项目中需要裁剪图片上某一处位置的头像，这边就记录下我的实现的操作。
js canvas做图片裁剪处理
牛马程序员进阶之路
08-23 933
js canvas做图片裁剪处理
原生js+canvas实现图片裁剪
12-22
原生JavaScript+canvas实现图片裁剪功能，介绍css属性clip
基于cropperjs和canvas实现的图片裁剪
08-28
基于cropperjs和canvas实现的图片裁剪
使用canvas做一个可绘制矩形的画布（带有移动，缩放，删除）
最新发布
qq_44727563的博客
11-21 458
canvas绘图
Android 之 Canvas API 详解 (Part 2) 剪切方法合集
leyang0910的博客
07-25 503
官方API文档：Canvas
html2canvas给图片添加水印,小程序用Canvas给图片加水印，拼接图片，制作名片
weixin_35866960的博客
06-04 1020
Canvas是微信小程序中的一个原生组件，因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明。canvas这个组件其实就是一个画布，你可以在上面画很多你用其他方式不好实现的内容。下面我就将介绍一下怎么给图片添加水印，图片的拼接，怎么制作个性名片以及制作一个涂鸦的画板。水印水印的添加总的来说可以简单的分为三步来走，第一步先完成一个画布的创建，第二步在画板上画出你想添加水印的图片，第三步画...
canvas 裁切路径 Clipping paths
Wanan
06-21 691
裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。和 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop 差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。clip() 我们用 clip 方法
[前端javascript] canvas 学习笔记，实现图片剪裁
qq_31894095的博客
07-21 252
/ 替换为你要剪裁的图像的URL。记得根据实际需求替换代码中的图像URL、剪裁区域的坐标和尺寸，以及处理剪裁后图像的方式。
canvas图片裁剪demo
m0_66675766的博客
08-03 117
【代码】canvas图片裁剪demo。
canvas图片裁剪
07-28
回答: 使用canvas对图片进行裁剪的步骤如下： 1. 首先创建一个canvas元素，并指定其宽度和高度。 2. 计算原图需要剪切的相关参数，包括开始绘制点位和绘制区域大小。 3. 使用drawImage方法将需要的部分图片绘制到canvas上，传入参数包括原图元素、开始绘制点位和绘制区域大小。 4. 使用toDataURL方法获取裁剪后的图片的base64值，可以用于后续的操作。 通过以上步骤，就可以使用canvas对图片进行裁剪处理了。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [使用canvas对图片进行裁切](https://blog.csdn.net/u011513460/article/details/117655386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【vue】canvas图片剪切](https://blog.csdn.net/qq_45222331/article/details/128188951)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZSK6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值