需求:将一张图片分割成多个图片,并下载下来
实现:
页面部分:
<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'
})