CSS3技術可以實現圖片上傳、預覽和截圖,下面我們來一步步實現。
首先,我們需要一個上傳按鈕和一個顯示圖片的容器,HTML代碼如下:
<input type="file" id="upload-btn"> <div id="preview-container"></div>
然后,在CSS中設置容器的寬高,并將上傳按鈕隱藏,代碼如下:
#upload-btn { display: none; } #preview-container { width: 400px; height: 400px; border: 1px solid #ccc; }
接著,我們需要使用JavaScript來監聽上傳按鈕的change事件,讀取上傳的圖片,展示到容器中,并給容器添加截圖功能,代碼如下:
var uploadBtn = document.getElementById('upload-btn'); var previewContainer = document.getElementById('preview-container'); uploadBtn.addEventListener('change', function() { var file = this.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { previewContainer.style.backgroundImage = 'url(' + this.result + ')'; previewContainer.style.backgroundSize = 'cover'; addCropper(); } }); function addCropper() { var img = document.createElement('img'); img.src = previewContainer.style.backgroundImage.slice(4, -1).replace(/"/g, ""); img.onload = function() { var cropper = new Cropper(img, { aspectRatio: 1, crop: function(e) { var imageData = cropper.getCroppedCanvas().toDataURL(); previewContainer.style.backgroundImage = 'url(' + imageData + ')'; previewContainer.style.backgroundSize = 'cover'; } }); }; }
最后,我們需要引入一個Cropper庫來實現截圖功能,代碼如下:
<script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>
以上就是使用CSS3實現圖片上傳和截圖的完整代碼實現。通過這種方法,我們可以方便地上傳、預覽和截取圖片,為網站增添美觀和互動性。