文档章节

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

少不读水浒
 少不读水浒
发布于 2017/09/11 17:34
字数 345
阅读 71
收藏 0
点赞 0
评论 0

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

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

1.原图:

2.上传之后

3.调整比例和大小

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

 

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

© 著作权归作者所有

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

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

祈澈姑娘 ⋅ 05/17 ⋅ 0

【php增删改查实例】第二十四节 - 文件上传在项目中的具体应用

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

剽悍一小兔 ⋅ 06/07 ⋅ 0

pumelo/WebHeadPicker

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

pumelo ⋅ 2017/05/20 ⋅ 0

JavaScript中的图片处理与合成

JavaScript中的图片处理与合成(一) 65 人赞了该文章 摘要:图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工...

十万猛虎下画山 ⋅ 05/04 ⋅ 0

使用jQuery Jcrop 图像裁剪无法更换图片的坑

因为公司需求,需要完成一个显示屏定制的业务,用户自主上传图片然后在线裁剪的功能,我选择了jQuery Jcrop这个插件。 先看看怎么使用使用方法 载入 CSS 文件 载入 JavaScript 文件 给 IMG ...

游魂Andy ⋅ 06/19 ⋅ 0

【前端】图片裁剪(二)Jcrop实现裁剪

学着做自己,并优雅的放手不属于自己的。 前一篇文章已经跟大家讲述了如何利用JavaScript实现Web端图片裁剪功能。可能对大多数人来说,利用JavaScript去实现裁剪功能比较费事,那这一篇文章将...

zrunker ⋅ 2017/10/25 ⋅ 0

Python综合Web案例_在线为头像添加装饰

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程: 前端: BootStrap, Jquery, Jcrop 后端: Django, Pillow 第一步: 选择头像 初始页面 这是一个...

木子昭 ⋅ 01/03 ⋅ 0

618快要来临--家具大战一战即发

前言 今年是小程序很火的一年,所以最近在自学微信小程序,所以打算自己撸一个小程序出来,由于自己才刚刚自学不久。就做了一个相对简单的家具小程序。当然在这其中也遇到了一些问题和bug,在...

盏茶作酒 流苏如画 ⋅ 06/11 ⋅ 0

ASP.NET简单实现APP中用户个人头像上传和裁剪

最近有个微信项目的用户个人中心模块中,客户要求用户头像不仅仅只是上传图片,还需要能对图片进行裁剪。考虑到flash在IOS和Android上的兼容性问题,于是想着能从js这块入手,在网上发现了d...

Jokeny ⋅ 2016/08/20 ⋅ 0

如何在微信公众号开发中实现图片裁剪

接触微信公众号开发已经有一段时间了,发现其实和网页开发差不多,但是因为浏览器的不同,自己也碰过一些坑,其中就有怎么实现图片裁剪功能。 一开始我是用PC端的思路去做的,首先在本地获取...

豆花饭烧土豆 ⋅ 2016/08/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构—创建“服务注册中心”

创建一个基础的Spring Boot工程,命名为eureka-server,并在pom.xml中引入需要的依赖内容: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par......

itcloud ⋅ 14分钟前 ⋅ 0

拖动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } </style......

fyliujj ⋅ 17分钟前 ⋅ 0

es6 polyfill array

polyfill之javascript函数的兼容写法——Array篇 1. Array.isArray(obj) if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[objec......

球球 ⋅ 18分钟前 ⋅ 0

kibana启动异常

检查一下:kibana.yml 每一对key:value中,冒号之后应有空格。

增删改查1 ⋅ 20分钟前 ⋅ 0

js修改img的src属性刷新图片时的图片缓存问题

问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过...

HaierBrother ⋅ 21分钟前 ⋅ 0

Mysql

1.Jdbc Url 设置allowMultiQueries为true和false mysql的批量更新是要我们主动去设置的, 就是在数据库的连接url上设置一下,加上* &allowMultiQueries=true *即可。 参数名称 参数说明 缺省...

瑟青豆 ⋅ 24分钟前 ⋅ 0

mysql导出导入表结构与数据

当我们需要进行数据迁移时,mysql自带的mysqldump会是最好的方式。 1.导出某张表的结构和数据 首先,我们应当使用服务器,打开终端,连接到所需要导出的表所在的服务器上。执行命令: mysqld...

hengbao5 ⋅ 24分钟前 ⋅ 0

世界杯也走向“比拼”大数据的时代

《日本经济新闻》6月19日报道称,俄罗斯足球世界杯已于6月14日揭开战幕。作为第21次举办的足球世界杯,如何活用大数据有可能成为决定各支球队胜负的重要因素。从对阵球队的分析到战术建议,还...

加米谷大数据 ⋅ 25分钟前 ⋅ 0

金额转为千分制,金额转中文大写

金额转关为大写 /** 数字金额大写转换(可以处理整数,小数,负数) */ function digitUppercase(n){ if(!n) reutrn "" let fraction = ['角', '分']; let digit = [...

YXMBetter ⋅ 27分钟前 ⋅ 0

开发利器JRebel部署SpringBoot项目

不要以为年纪轻轻就跌倒了人生谷底,未来还有更大的下降空间等着你。 idea下载和安装JRebel 激活JRebel 访问https://my.jrebel.com/ 使用facebook或twitter登录 勾选 Build project automati...

郑龙飞 ⋅ 33分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部