function preview(img, selection){ 
var scaleX = 100 / selection.width; 
var scaleY = 100 / selection.height; 

$('#biuuu + div > img').css({ 
width: Math.round(scaleX * 400) + 'px', 
height: Math.round(scaleY * 300) + 'px', 
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
}); 
} 

$(document).ready(function () { 
$('<div><img src="/UploadFiles/2021-04-02/biuuu.jpg">





//初始化加载 




$(window).load(function () { 
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
}); 




三，调用 






<div class="container"> 
<p> 
<img id="biuuu" src="/UploadFiles/2021-04-02/biuuu.jpg">



使用上面的javascript截图进行扩展可以实现很多的动态功能，jQuery提供的imgAreaSelect插件调用非常简单，其它相关应用可参考：imgAreaSelect Examples 



使用jQuery插件imgAreaSelect实现javascript截图还是非常简单的，基本上就是一个动态的图像显示，获取源图片的位置和选取框的大小[宽度和高度]，轻松实现javascript截图功能。