利用canvas对图片进行切割

使用input标签选择一张图片, 然后利用canvas对图片进行切割, 可以设置切割的行数和列数

这是html代码

...
<input type="file" id="input">
...

 这是js代码

class SplitImage {
    constructor (options) {
      this.options = {
        col: 3,
        row: 3,
        inputEle: ''
      }
      this.options = Object.assign({}, this.options, options)
      if (!this.options.inputEle) {
        throw new Error('Options.inputEle is invalid! Please check!')
      }
      this.input = null
      this.canvas = null
      this.ctx = null
      this.img = null
      this.init()
    }
    init () {
      this.input = document.querySelectorAll(this.options.inputEle)[0]
      this.input.onchange = this.fileChange.bind(this)
      this.createCanvas()
    }
    async fileChange () {
      let file = this.input.files[0]
      try {
        let base64 = await this.fileReader(file)
        try {
          await this.createImg(base64)
          this.splitImg()
        } catch (e) {
          console.log(e)
        }
      } catch (e) {
        console.log(e)
      }
    }
    fileReader (file) { // 读取文件base64
      return new Promise((resolve, reject) => {
        const reader  = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = (e) => {
          const result = e.target.result
          resolve(result)
        }
        reader.onerror = (e) => {
          reject(e)
        }
      })
    }
    createImg (base64) { // 加载图片
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = (e) => {
          this.img = img
          resolve()
        }
        img.onerror = (e) => {
          console.log(e)
          reject(e)
        }
        img.src = base64
      })
    }
    createCanvas () { // 创建canvas
      this.canvas = document.createElement('canvas')
      this.ctx = this.canvas.getContext('2d')
    }
    drawImg (options = {}) { // 绘制图片
      this.canvas.width = options.width
      this.canvas.height = options.height
      this.ctx.drawImage(this.img, options.x, options.y, options.width, options.height, 0, 0, options.width, options.height)
      const base64 = this.canvas.toDataURL()
      let img = document.createElement('img')
      img.src = base64
      img.style.border = '5px solid red'
      img.style.marginBottom = '-5px'
      document.body.appendChild(img)
    }
    splitImg () { // 切割图片
      let list = []
      for (let y = 0; y < this.options.row; y++) {
        for (let x = 0; x < this.options.col; x++) {
          let simpleWidth = parseInt(this.img.width / this.options.col)
          let simpleHeight = parseInt(this.img.height / this.options.row)
          list.push({
            x: x * simpleWidth,
            y: y * simpleHeight,
            width: simpleWidth,
            height: simpleHeight
          })
        }
      }
      list.forEach(item => {
        this.drawImg(item)
      })
    }
  }
  let splitImage = new SplitImage({
    col: 2, // 切割图片的列数
    row: 2, // 切割图片的行数
    inputEle: '#input' // 标签选择器
  })

这是原图

这是切割之后的图片,分成了3*3的9宫格图片,为了看得更清楚, 我给图片都加上了5px的黑色边框

 

转载于:https://www.cnblogs.com/lxlin/p/11352738.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在JavaScript中,你可以使用Canvas的`drawImage()`方法和`context.clip()`方法来实现图片切割。以下是一个示例代码: ```javascript // 获取canvas元素和绘图上下文 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 创建一个Image对象并加载图片 var img = new Image(); img.src = "path/to/image.jpg"; // 等待图片加载完成后执行绘制和切割操作 img.onload = function() { // 设置切割区域的宽度和高度 var cropWidth = 200; var cropHeight = 200; // 绘制原始图片 ctx.drawImage(img, 0, 0); // 切割图片 ctx.beginPath(); ctx.rect(0, 0, cropWidth, cropHeight); ctx.clip(); // 绘制切割后的图片 ctx.drawImage(img, 0, 0, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight); }; ``` 在上述代码中,首先获取了Canvas元素和绘图上下文,然后创建一个Image对象并指定要加载的图片路径。在图片加载完成后,使用`drawImage()`方法将原始图片绘制到Canvas上。接下来,使用`beginPath()`方法开始定义切割区域,并使用`rect()`方法定义一个矩形区域作为切割区域。然后,使用`clip()`方法将切割区域应用到Canvas上下文中。最后,使用`drawImage()`方法将切割后的图片绘制到Canvas上。 请注意,上述代码中的`"myCanvas"`应该替换为你实际使用的Canvas元素的id,而`"path/to/image.jpg"`应该替换为你要加载的图片的路径。切割区域的宽度和高度可以根据你的需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值