实现思路如下:
- 通过fabric.js绘制多张图片,同理这一步也可以直接使用canvas绘制多张图片;
- 通过save()将整个绘制的canvas的内容转成base64数据,然后onload方法后对图片进行剪切操作;
- 分割的方法主要就是canvas的putImageData
以下两个demo略有不同:
1、直接渲染canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
#mycanvas {
background-color: red;
border: 1px solid #000000;
}
img {
margin: 20px;
}
.box {
position: fixed;
top: 100px;
right: 0;
}
</style>
</head>
<body>
<h3>使用canvas实现切图的效果 <button type="button" onclick="save()">按钮</button></h3>
<div class="box" id="box">
</div>
<div class="mycanvas">
<canvas id="mycanvas" width="300" height="800"></canvas>
</div>
<script src="fabric.min.js"></script>
<script>
var mycanvas = new fabric.Canvas('mycanvas');
fabric.Image.fromURL('2.jpg', function(oImg) {
oImg.set('selectable', false);
mycanvas.add(oImg);
});
fabric.Image.fromURL('2.jpg', function(oImg) {
oImg.set('selectable', false);
oImg.set({
top: 300
})
mycanvas.add(oImg);
});
mycanvas.setAttribute('height', 200)
function save() {
mycanvas.setBackgroundColor("blue");
const base64 = mycanvas.toDataURL({
format: 'jpeg',
quality: 1,
});
console.log(base64)
var imgToCut = new Image();
imgToCut.src = base64;
imgToCut.onload = function() {
cutImage(this);
};
}
function cutImage(img) {
var h = img.height,
w = img.width;
//创建Canvas
var oCanvas = createCanvas(w, h);
//拿到canvas的ctx
var ctx = oCanvas.getContext('2d');
//先drawImage,然后getImageData
ctx.drawImage(img, 0, 0, w, h);
var imageData = ctx.getImageData(0, 0, w, h);
resolveCut(imageData, 0, 0, 300, 150);
resolveCut(imageData, 0, 150, 300, 150);
document.getElementById('box').removeChild(oCanvas);
}
function resolveCut(imgData, x, y, w, h) {
console.log(x, y, w, h);
var cvs = createCanvas(w, h);
var ctx = cvs.getContext("2d");
ctx.putImageData(imgData, -x, -y);
}
function createCanvas(w, h) {
var canvas = document.createElement('canvas');
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
document.getElementById('box').appendChild(canvas);
return canvas;
}
</script>
</body>
</html>
2、先拿到canvas的base64,然后渲染成图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
#mycanvas {
background-color: red;
border: 1px solid #000000;
}
img {
margin: 0;
display: block;
}
.box {
position: fixed;
top: 100px;
right: 0;
}
</style>
</head>
<body>
<h3>使用canvas实现九宫格切图的效果 <button type="button" onclick="save()">按钮</button></h3>
<div class="box" id="box">
</div>
<div class="mycanvas">
<canvas id="mycanvas" width="300" height="800"></canvas>
</div>
<script src="fabric.min.js"></script>
<script>
var mycanvas = new fabric.Canvas('mycanvas');
fabric.Image.fromURL('2.jpg', function(oImg) {
oImg.set('selectable', false);
mycanvas.add(oImg);
});
fabric.Image.fromURL('2.jpg', function(oImg) {
oImg.set('selectable', false);
oImg.set({
top: 300
})
mycanvas.add(oImg);
});
function save() {
mycanvas.setBackgroundColor("blue");
const base64 = mycanvas.toDataURL({
format: 'jpeg',
quality: 1,
});
console.log(base64)
var imgToCut = new Image();
imgToCut.src = base64;
imgToCut.onload = function() {
cutImage(this);
};
}
function cutImage(img) {
var h = img.height,
w = img.width;
//创建Canvas
var oCanvas = createCanvas(w, h);
//拿到canvas的ctx
var ctx = oCanvas.getContext('2d');
//先drawImage,然后getImageData
ctx.drawImage(img, 0, 0, w, h);
var imageData = ctx.getImageData(0, 0, w, h);
resolveCut(imageData, 0, 0, 300, 150);
resolveCut(imageData, 0, 150, 300, 150);
// document.getElementById('box').removeChild(oCanvas);
}
function resolveCut(imgData, x, y, w, h) {
console.log(x, y, w, h);
var cvs = createCanvas(w, h);
var ctx = cvs.getContext("2d");
ctx.putImageData(imgData, -x, -y);
var imgDom = document.createElement('img');
imgDom.setAttribute('src', cvs.toDataURL('image/jpeg')); // base 64
document.getElementById('box').appendChild(imgDom);
}
function createCanvas(w, h) {
var canvas = document.createElement('canvas');
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
// document.getElementById('box').appendChild(canvas);
return canvas;
}
</script>
</body>
</html>