文档章节

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

少不读水浒
 少不读水浒
发布于 2017/09/11 17:34
字数 345
阅读 137
收藏 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
微信小程序--通过canvas生成图片并保存到本地

前言 需求场景:我们知道,微信小程序可以分享给好友或者微信群,不能分享到朋友圈,那分享到朋友圈就需要特殊处理一下,这里我们把小程序和结合起来使用,生成自定义图片并保存到本地。 代码...

real__隔壁老胖兔
09/17
0
0
纯JS能做到本地裁剪图片吗,不是服务器处理,不是CSS样式隐藏

如题,纯js能在本地裁剪图片吗,在网上看到很多都是服务器处理的, 就问问可以在客户端页面那里先裁剪好尺寸再提交裁剪后的图片到服务器,这样可以吗?

蓝天梦
2015/07/24
717
5
Cocos2d-js中使用纹理对象创建Sprite对象

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

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

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

剽悍一小兔
06/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS配置Tomcat监听80端口,虚拟主机

Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [root@test-a ~]# vim /usr/local/tomcat/conf/server.xml # 找到 Connector port="8080" protocol="HTTP/1......

野雪球
今天
5
0
《稻盛和夫经营学》读后感心得体会3180字范文

《稻盛和夫经营学》读后感心得体会3180字范文: 一代日本经营之圣稻盛和夫凭借刻苦勤奋的精神以及深植于佛教的商业道德准则,成为了“佛系”企业家的代表人物。在《稻盛和夫经营学》“领导人...

原创小博客
今天
3
0
java框架学习日志-5(常见的依赖注入)

依赖注入(dependency injection) 之前提到控制反转(Inversion of Control)也叫依赖注入,它们其实是一个东西,只是看的角度不同,这章详细说一下依赖注入。 依赖——指bean对象创建依赖于...

白话
今天
4
0
红外接收器驱动开发

背景:使用系统的红外遥控软件没有反应,然后以为自己接线错误,反复测试,结果烧坏了一个红外接收器,信号主板没有问题。所以自己开发了一个红外接收器的python驱动。接线参见https://my.os...

mbzhong
今天
2
0
ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部