最近做一個圖片上傳需要裁剪一下的功能然後百度了一下，找到了cropperjs 說明文檔 https://www.npmjs.com/package/cropperjs 這是一個簡單的基礎使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
最近做一個圖片上傳需要裁剪一下的功能然後百度了一下，找到了cropperjs
說明文檔 https://www.npmjs.com/package/cropperjs
這是一個簡單的基礎使用
<!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"> <title>上傳圖片</title> <!-- 樣式 --> <link rel="stylesheet" href='./node_modules/cropperjs/dist/cropper.css' /> <!-- js --> <script src="./node_modules/cropperjs/dist/cropper.js"></script> <style> .allbox{ width: 100%; display: flex; margin-bottom: 20px; }/* 裝上傳圖片 */ .box1{ width: 500px; height: 500px; background: rgba(40, 40, 40, 0.3); } /* 被裁剪展示圖片容器 */ .box2{ width: 100px; height: 100px; margin-left:100px; }
</style> </head> <body> <div class="allbox"> <!-- 展示圖片 --> <div class="box1"> <img id="img1"> </div>
<div class="box2">
</div> </div> <input id="input1" type="file"></input> <button id="button1">保存圖片</button>
<script>
let img1 =document.getElementById('img1') let input1 = document.getElementById('input1') let button1 = document.getElementById('button1')
// 上傳的圖片儲存一下 let fileImg; // 聲明一個變數 let cropper = new Cropper(img1,{ aspectRatio:1/1, // 裁切比例 viewMode:1, // 0 無限制 1 裁剪框不超過圖片 2具體個1差不多沒看出 ,3拉伸圖片 autoCropArea: 0.5 , //裁切框大小 預設0.8(原圖的80%) // 跟多配置選項 https://www.npmjs.com/package/cropperjs })
//上傳圖片時 input1.onchange = (event) => {
fileImg = event.target.files[0]
// cropper.replace(url,[hasSameSize]) 設置圖片 hasSameSize type:Boolean,Default: false cropper.replace(URL.createObjectURL(fileImg),false)
}
// 保存時 button1.onclick = () => { let base64Img = cropper.getCroppedCanvas().toDataURL() console.log(base64Img) cropper.getCroppedCanvas().toBlob((blob) => { // 得到 blob 圖片 console.log('blob',blob) // 得到 file 文件
console.log('file',new window.File([blob], fileImg.name, {type: fileImg.type})) }) }
</script> </body> </html>
