이 기사에서 제공하는 내용은 모바일 단말기에서 Cropper.js를 사용하여 이미지를 자르고 업로드하는 방법(코드 분석)에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 될 것입니다.
<link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"></script>
HTML 구조
<li class="ui-border-bottom"> <a href="javascripts:void(0);">头像 <span class="pull-right user-header"> <img class="rounded" id="avatar" src="../images/user.jpg" alt="avatar"> <input type="file" class="sr-only" id="input" name="image" accept="image/*"> </span> </a> </li>
<를 사용하는 자르기 도구를 소개합니다! --아바타 스크린샷 팝업 창-->
<div class="common-layer" id="modal"> <div class="layer-content"> <div class="layer-title"> <span class="cancel-btn" id="cancle">取消</span> <h4>截图头像</h4> </div> <div class="layer-area"> <div class="img-container"> <img id="image" src="https://avatars0.githubusercontent.com/u/3456749"> </div> <a class="ui-btn m-t-15" id="crop" href="javascripts:void(0);">保存</a> </div> </div> </div>
js 참조:
특정 Cropper.js의 경우 공식 웹사이트를 볼 수 있습니다.
$(function() { //修改头像 参加文件https://blog.csdn.net/weixin_38023551/article/details/78792400 var avatar = document.getElementById('avatar'); var image = document.getElementById('image'); var input = document.getElementById('input'); var $modal = $('#modal'); var cropper; //点击图片 input.addEventListener('change', function (e) { var files = e.target.files; var done = function (url) { input.value = ''; image.src = url; $modal.show(function() { //初始化 cropper = new Cropper(image, { aspectRatio: 1, viewMode:1, }); }); }; var reader; var file; var url; if (files && files.length > 0) { file = files[0]; if (URL) { done(URL.createObjectURL(file)); } else if (FileReader) { reader = new FileReader(); reader.onload = function (e) { done(reader.result); }; reader.readAsDataURL(file); } } }); //关闭弹窗 document.getElementById('cancle').addEventListener('click', function () { $modal.hide(function() { cropper.destroy(); cropper = null; }); }); //保存截图 document.getElementById('crop').addEventListener('click', function () { var initialAvatarURL; var canvas; $modal.hide(function() { cropper.destroy(); cropper = null; }); if (cropper) { canvas = cropper.getCroppedCanvas({ width: 120, height: 120, }); initialAvatarURL = avatar.src; avatar.src = canvas.toDataURL('image/jpeg'); //保存数据 canvas.toBlob(function (blob) { var formData = new FormData(); formData.append('avatar', blob); $.ajax('https://jsonplaceholder.typicode.com/posts', { method: 'POST', data: formData, processData: false, contentType: false, success: function () { console.log('Upload success'); }, error: function () { avatar.src = initialAvatarURL; console.log('Upload error'); } }); }); } }); })
관련 권장 사항:
javascript - 방법 이미지 자르기 + 휴대폰 업로드 기능 구현#🎜🎜 #
위 내용은 모바일 단말에서 Cropper.js를 사용하여 이미지를 자르고 업로드하는 방법(코드 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!