利用canvas做图片裁剪并下载

需求：将一张图片分割成多个图片，并下载下来

实现：

页面部分：

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

主要代码部分：

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.getElementById(this.options.inputEle) 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() // 借用a标签下载图片 let a = document.createElement("a"); a.href = base64; a.download = options.name + ".png"; a.click(); // 下面是将图片放入页面 // let img = document.createElement('img') // img.src = base64 // img.style.border = '5px solid transparent' // img.style.marginBottom = '-5px' // document.body.appendChild(img) } splitImg() { // 切割图片 /* // 这里是手动写的配置，根据需要的设置 let list = [ // header { x: 0, y: 0, width: 135, height: 60, name: "header1" }, { x: 136, y: 28, width: 150, height: 32, name: "header2" }, { x: 340, y: 28, width: 46, height: 32, name: "header3" }, // body { x: 0, y: 90, width: 30, height: 150, name: "body1" }, { x: 50, y: 90, width: 150, height: 150, name: "body2" }, { x: 340, y: 90, width: 46, height: 150, name: "body3" }, // footer { x: 0, y: 390, width: 30, height: 40, name: "footer1" }, { x: 50, y: 390, width: 150, height: 40, name: "footer2" }, { x: 340, y: 390, width: 46, height: 40, name: "footer3" }, ]*/ 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: 3, row: 3, inputEle: '#file' })