资讯专栏INFORMATION COLUMN

移动端cropper.js 裁剪图片并上传

马龙驹 / 2612人阅读

摘要:参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据

参考效果:
http://www.17sucai.com/previe...

引入cropper使用

</>复制代码

HTML结构

</>复制代码

  1. 头像
  2. avatar

</>复制代码

  1. 取消
  2. 截图头像

  3. 保存

js引用:
具体cropper.js 使用可查看官网http://fengyuanchen.github.io...

</>复制代码

  1. $(function() {
  2. //修改头像 参加文件https://blog.csdn.net/weixin_38023551/article/details/78792400
  3. var avatar = document.getElementById("avatar");
  4. var image = document.getElementById("image");
  5. var input = document.getElementById("input");
  6. var $modal = $("#modal");
  7. var cropper;
  8. //点击图片
  9. input.addEventListener("change", function (e) {
  10. var files = e.target.files;
  11. var done = function (url) {
  12. input.value = "";
  13. image.src = url;
  14. $modal.show(function() {
  15. //初始化
  16. cropper = new Cropper(image, {
  17. aspectRatio: 1,
  18. viewMode:1,
  19. });
  20. });
  21. };
  22. var reader;
  23. var file;
  24. var url;
  25. if (files && files.length > 0) {
  26. file = files[0];
  27. if (URL) {
  28. done(URL.createObjectURL(file));
  29. } else if (FileReader) {
  30. reader = new FileReader();
  31. reader.onload = function (e) {
  32. done(reader.result);
  33. };
  34. reader.readAsDataURL(file);
  35. }
  36. }
  37. });
  38. //关闭弹窗
  39. document.getElementById("cancle").addEventListener("click", function () {
  40. $modal.hide(function() {
  41. cropper.destroy();
  42. cropper = null;
  43. });
  44. });
  45. //保存截图
  46. document.getElementById("crop").addEventListener("click", function () {
  47. var initialAvatarURL;
  48. var canvas;
  49. $modal.hide(function() {
  50. cropper.destroy();
  51. cropper = null;
  52. });
  53. if (cropper) {
  54. canvas = cropper.getCroppedCanvas({
  55. width: 120,
  56. height: 120,
  57. });
  58. initialAvatarURL = avatar.src;
  59. avatar.src = canvas.toDataURL("image/jpeg");
  60. //保存数据
  61. canvas.toBlob(function (blob) {
  62. var formData = new FormData();
  63. formData.append("avatar", blob);
  64. $.ajax("https://jsonplaceholder.typicode.com/posts", {
  65. method: "POST",
  66. data: formData,
  67. processData: false,
  68. contentType: false,
  69. success: function () {
  70. console.log("Upload success");
  71. },
  72. error: function () {
  73. avatar.src = initialAvatarURL;
  74. console.log("Upload error");
  75. }
  76. });
  77. });
  78. }
  79. });
  80. })

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52952.html

相关文章

  • 移动cropper.js 裁剪图片上传

    摘要:参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据 参考效果:http://www.17sucai.com/previe... 引入cropper使用 HTML结构 头像 ...

    since1986 评论0 收藏0
  • 无需Flash实现图片裁剪——HTML5中级进阶

    摘要:需求就是那么简单,在浏览器里裁剪图片并上传到服务器。原图片对象上传裁剪后的对象初始化图片预览根据裁剪参数绘制转对象以下将对每个环节详解。或者根据获取裁剪信息包括旋转和缩放用进行手动绘制。 前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕。 需求就是那么简单,在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是,将图片和裁剪参数(x...

    JerryC 评论0 收藏0
  • JQuery 插件图片裁剪插件cropper.js使用,上传

    摘要:图片裁剪,压缩是上传图片一定会遇到的问题。如何获得裁剪的图片呢获取裁剪后的图片信息首先我们可以获得裁剪框的节点然后调用图片质量图片质量越好图片大小越大这样就得到了你裁剪的图片了可以通过,放到你想要的节点里展示。 图片裁剪,压缩是上传图片一定会遇到的问题。这里把我测试cropper.js这款jquery插件的心得分享一下,可以给新手做参考。 引入插件相关文件,你们down到本地也可以。这...

    SHERlocked93 评论0 收藏0
  • 截取图片生成头像插件

    摘要:获取图片地址之后,进行截取图片这里推荐一个插件点这里,具体怎么用就不再赘述。等截取图片之后,需要将截取的文件转换为二进制大文件。调取接口,将二进制大文件上传即可。 上传头像插件 目的: 帮助开发者快速开发上传头像功能点 背景: 现在b,g能搜到的头像上传插件并不太好用,所以想提供一个比较自由度的上传并且可以剪切的插件。 资源: 具体资源请查看这里 实现大致思路如下: 先有一个上传的...

    scq000 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<