文档章节

前端纯js模仿微信头像的裁剪(图片裁剪)

少不读水浒
 少不读水浒
发布于 2017/09/11 17:34
字数 345
阅读 94
收藏 0

个人的移动端网页项目,有个功能要做一个头像切割的功能,效果要和微信头像切割一致。不在前端进行实际的裁剪,只是拿到裁剪的参数,裁剪的起始坐标以及宽度和高度(x,y,width,height)。刚拿到这个要求的时候,我想这么屌丝的功能,作为一个优秀的程序猿怎么能重复造轮子呢,于是果断度娘了一下。麻蛋,不是广告炸弹,就是瞎扯淡。无奈之下,本来咬牙开始了自己造轮子。本来想自己写应该也不是很难,但是由于自己是业余前端,所以花了两三天的时间才算完成这个功能。

测试时候,如果是在pc端浏览器模式下,请切换成手机模式;当然,可以直接部署一下,在手机上直接进行测试。测试效果如下:

1.原图:

2.上传之后

3.调整比例和大小

4.最后上传至服务器,进行裁剪,裁剪结果

 

总结:前端调整之后,最后是把参数(起始坐标和宽高)和图片传到后台,后台根据传进来的参数进行裁剪。(源码:https://gitee.com/sanpy/h5-demo/tree/master/cut-image-wx

© 著作权归作者所有

共有 人打赏支持
少不读水浒
粉丝 6
博文 17
码字总数 19261
作品 0
徐汇
程序员
基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求。 功能: 1:点击选择图片...

祈澈姑娘
05/17
0
0
Cocos2d-js中使用纹理对象创建Sprite对象

本节我们会通过一个实例介绍纹理对象创建Sprite对象使用,这个实例如图5-2所示,其中地面上的草是放在背景(如下图所示)中的,场景中的两棵树是从后图所示的“树”纹理图片中截取出来的,图...

智捷课堂
2015/03/28
0
0
【php增删改查实例】第二十四节 - 文件上传在项目中的具体应用

文件上传在项目中,一般有两个用武之地,分别为设置用户的头像和上传附件。本节我们演示如果进行用户头像的上传。 因为一个用户单独并且唯一对应了一个头像,是一对一的关系,所以我们需要去...

剽悍一小兔
06/07
0
0
Cocos2d-JS中的Sprite精灵类

精灵类是cc.Sprite,它的类图如下图所示。cc.Sprite类直接继承了cc.Node类,具有cc.Node基本特征。 创建Sprite精灵对象 创建精灵对象可以使用构造函数实现,它们接受相同的参数,这些参数非常...

智捷课堂
2015/03/25
0
0
pumelo/WebHeadPicker

#WebHeadPicker #Web头像拾取器插件 在网上找了一段时间,总的来说,cropper比较好。本项目基于cropper,以及一些互联网资源。 您是否应该使用本项目?如果您需要把头像直接上传到阿里云OSS...

pumelo
2017/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部