需求是给一张图片，然后裁切出指定任意位置的部分图片(下面代码就是)
如果要放大一张图片的的某个部分，下面的依然适用，只需要调取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">
</head>
<body>
要裁切的图片
<img src="https://vdposter.bdstatic.com/457ffa55b1d83b633f256ed51b1c3298.jpeg" alt="">
<!-- 展示canvas 切出来的图片 -->
<!-- <canvas id='canvas'></canvas> -->
裁剪出来之后的img
<script>
/**
imgUrl:图片地址
x：从被裁切图片的左上角为 x为0 往右边x的值越大
y：从被裁切图片的左上角为 y为0 往下边y的值越大
width：要裁切的图片的宽度
height：要裁切的图片的高度
**/
let getImg = ({ imgUrl, x, y, width, height }) => {
// let canvas = document.getElementById('canvas');
let canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
let img = new Image()
img.crossOrigin = "anonymous"; //允许跨域关键
img.src = imgUrl;
img.onload = () => {
canvas.width = width;
canvas.height =height;
ctx.drawImage(img, -x, -y,img.width,img.height);
getCutImg(canvas)
};
//获取图片
let getCutImg = (canvas) => {
let data = canvas.toDataURL()
showImg(data)
}
//展示显示出来图片
let showImg=(imgUrl)=>{
let imageNode = document.createElement('img');
imageNode.src = imgUrl;
document.body.appendChild(imageNode)
}
}
getImg({
imgUrl: 'https://vdposter.bdstatic.com/457ffa55b1d83b633f256ed51b1c3298.jpeg',
x: 100,
y: 150,
width: 200,
height: 100,
})
</script>
</body>
</html>
