js 截取图片

// 获取canvas元素和上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 创建一个新的Image对象
var img = new Image();
img.src = 'path/to/image.jpg';

// 确保图片加载完成后再进行绘制和裁剪
img.onload = function() {
    // 设置canvas尺寸
    canvas.width = 200;
    canvas.height = 200;

    // 定义裁剪区域
    ctx.beginPath();
    ctx.rect(50, 50, 100, 100); // x, y, width, height
    ctx.clip();

    // 绘制图片到canvas，只有裁剪区域内的部分会被绘制
    ctx.drawImage(img, 0, 0, 200, 200);

    // 如果需要将裁剪后的图片导出为新的图片文件
    var dataURL = canvas.toDataURL('image/png');
    // 可以将dataURL设置为img元素的src，或者发送到服务器
};

<div class="image-container">
    <img src="path/to/image.jpg" alt="Image Description">
</div>

<style>
.image-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.image-container img {
    position: absolute;
    left: -50px; /* 根据需要调整 */
    top: -50px; /* 根据需要调整 */
}
</style>