一.说明
工作中遇到一个需求，比如400px*1600px，要求按照400的高度将图片切成4块，然后分别上传到服务器，正好最近研究了canvas，可以实现这个需求，所以就来带薪写点东西了。
二.核心代码封装
/**
* @param { Object } record:
{
url:'https://1500019099.vod2.myqcloud.com/cba1f0abvodsh1500019099/71bbc2643270835009409946523/n1PZ0GIMnWsA.png',
width:400,
height:1600,
name:'canvas切割长图片'
...
}
* @param { number } setHeight:设置的切片高度
*/
cutImage = (record,setHeight) => {
return new Promise((resolve,reject)=>{
var image = new Image();
image.setAttribute('crossOrigin', 'Anonymous')
image.src = record.url;
const chunks = Math.ceil(record.height / setHeight)
image.onload= async ()=>{
var imagePieces = [];
for(var num = 1; num < chunks+1; num++) {
var canvas = document.createElement('canvas');
canvas.width = record.width;
let restHeight = num * setHeight >= record.height ? record.height-setHeight * (num-1):setHeight;
canvas.height = restHeight;
var context = canvas.getContext('2d');
context.drawImage(image, 0, setHeight*(num-1), record.width, restHeight, 0, 0, record.width, restHeight)
const {url,size } = await UploadVod(canvas.toDataURL())//具体上传的逻辑
imagePieces.push({
name:record.name+'-切片'+num,url:url,width:record.width,height:restHeight,size:size
});
}
resolve(imagePieces)
}
})
}
三. canvas的drawImage的说明
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
// 绘制图片
// 创建一个img对象
const img = new Image()
img.src = 'https://xxxx'
// 绘制图片，必须要等待图片加载完成
img.onload = function () {
// ctx.drawImage(img, x, y, sWidth, sHeight, x, y, width, height)
// 参数1： 绘制的图片
// 参数2345 从图片的哪个位置截取多大的图片
// 参数6789 绘制到画布的那个地方 以及绘制的大小
ctx.drawImage(img, 100, 100, 200, 200, 100, 100, 200, 200)
//从img的（100,100）位置截取宽200，高200的图片，从画布的（100,100）的位置绘制到画布上，绘制的图宽为200，高为200
}
四. canvas的其他功能-刮刮乐
<!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>Document</title>
<style>
canvas {
position: absolute;
z-index: 2;
}
.abc {
width: 200px;
height: 100px;
background-color: pink;
position: absolute;
line-height: 100px;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div class="abc"></div>
<canvas width='200' height='100'></canvas>
<script>
const canvas = document.querySelector('canvas')
const div = document.querySelector('div')
const ctx = canvas.getContext('2d')
ctx.fillStyle="#ccc";
ctx.fillRect(0,0,200,100);
const arr=['免费加班券','提前下班券','奖金100']
var index = Math.random()*arr.length | 0
const value= arr[index]
div.innerHTML=value
var flag=false
canvas.addEventListener('mousemove',(e)=>{
if(flag) {
console.log('鼠标按下了',e);
ctx.clearRect(e.offsetX-5,e.offsetY-5,10,10)
}
})
canvas.addEventListener('mousedown',(e)=>{
flag = true
})
canvas.addEventListener('mouseup',(e)=>{
flag = false
})
</script>
</body>
</html>
五.canvas的其他功能-撕衣服
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #000;
}
canvas {
background-color: pink;
display: block;
margin: 100px auto;
}
</style>
</head>
<body>
<canvas width="480" height="720"></canvas>
<script>
// 1. 绘制front到canvas中
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
// 2. 创建图片
const up = new Image()
up.src = 'up.jpg'
up.onload = function () {
ctx.drawImage(up, 0, 0, canvas.width, canvas.height)
}
const down = new Image()
down.src = 'down.jpg'
// 3. 给canvas注册移动的事件
let done = false
canvas.addEventListener('mousedown', function () {
done = true
})
canvas.addEventListener('mousemove', function (e) {
if (done) {
const x = e.offsetX - 5
const y = e.offsetY - 5
// 从不穿衣服的图片中绘制一部分内容到canvas上
// 从不穿衣服的图片中截取 10 * 10的图片 绘制到canvas上
ctx.drawImage(down, x, y, 10, 10, x, y, 10, 10)
}
})
canvas.addEventListener('mouseup', function () {
done = false
})
</script>
</body>
</html>
