效果
源码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Image Popup</title><style>#popup {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.8);}#popup img {margin: auto;display: block;max-width: 90%;max-height: 90%;}#popup:target {display: block;}#popupClose {position: absolute;top: 20px;right: 35px;color: #fff;font-size: 40px;font-weight: bold;text-decoration: none;}#popupClose:hover,#popupClose:focus {color: #bbb;text-decoration: none;cursor: pointer;}</style>
</head>
<body><img id="originalImage" src="" alt="Original Image" style="display:none;"><img id="croppedImage" src="" alt="Cropped Image" onclick="showPopup(this.src);"><div id="popup"><a href="#" id="popupClose">×</a><img id="popupImg" src="" alt="Popup Image"></div><script>function cropImage(url, cropHeight, callback) {const img = new Image();img.crossOrigin = 'Anonymous'; // Enable CORS if the image is hosted on a different domainimg.onload = function() {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const cropWidth = img.width;const effectiveCropHeight = img.height - cropHeight; // Fixed variable usagecanvas.width = cropWidth;canvas.height = effectiveCropHeight;ctx.drawImage(img, 0, 0, cropWidth, effectiveCropHeight, 0, 0, cropWidth, effectiveCropHeight);const croppedImageDataUrl = canvas.toDataURL();callback(croppedImageDataUrl);};img.onerror = function() {console.error('Failed to load image.');};img.src = url;}function showPopup(src) {const popupImg = document.getElementById('popupImg');popupImg.src = src;window.location.hash = 'popup';}// Example usageconst imageUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F08%2F0420%2F227651986_4_20210804085322222&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719538441&t=a5b93bb2e329ccf76156ac82bd67e1ec';const watermarkHeight = 70; // Adjust this height to match the watermark heightcropImage(imageUrl, watermarkHeight, function(croppedImageUrl) {document.getElementById('originalImage').src = imageUrl;document.getElementById('originalImage').style.display = 'block';document.getElementById('croppedImage').src = croppedImageUrl;});</script>
</body>
</html>
