移动端cropper.js如何实现裁剪图片并上传(代码分析)
程序员文章站
2022-04-22 22:07:36
...
本篇文章给大家带来的内容是关于移动端cropper.js如何实现裁剪图片并上传(代码分析) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
引入cropper使用
<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如何实现裁剪图片并上传(代码分析)的详细内容,更多请关注其它相关文章!