jq实现剪裁图片设置为头像

有时候我们需要设置为这样,就是将某些图片设置为剪裁成设置的尺寸:就是这样的

插件的地址:

http://www.htmleaf.com/jQuery/Image-Effects/201504211716.html可以兼容ie8的

注意:说一下现在图片的剪裁可以用clip用法就是clip:rect(top right bottom left);在这个img的需要提前设置为position:absolute这样效果才能出来

时间: 2024-08-02 15:10:28

jq实现剪裁图片设置为头像的相关文章

通过拍照或选择本地图片并剪裁图片设置成头像,并保存裁剪后图片与本地方便注册头像上传

1 import java.io.File; 2 3 import android.app.AlertDialog; 4 import android.content.Context; 5 import android.content.DialogInterface; 6 import android.content.Intent; 7 import android.graphics.Bitmap; 8 import android.graphics.drawable.BitmapDrawabl

将摄像头拍摄图像或者本地图片设置为头像的方法

一:效果图 效果描述:点击相框,将手机摄像头拍摄的图片或者本地图片设置为我们定义的头像 功能控件:UIImageView , UIAlertController , UITapGestureRecognizer , UIImagePickerController 首次运行的时候会提醒是否允许程序访问手机相册,点击ok     二:工程图 三:代码区 AppDelegate.h #import <UIKit/UIKit.h> @interface AppDelegate : UIResponde

2016-1-9 Quartz框架的学习,剪裁图片并设置边框

#import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } - (void)touchesBegan:(NSSet<UITo

本地选择图片并设置成头像,避开fakepath问题

最近工程中一个需求就是从本地选择图片设置成用户头像,但是用<input type = "file">在onchange事件中得到的路径中包含fakepath.这个问题一直没有找到好的解决办法,无意间发现下面的方法,但是通过打印 event.target.result这个变量,发现不是路径,而是一串很长的base64编码,也没弄明白是怎么回事,刚初学,总之能完成功能,希望大神多指点.在onchange事件中关联以下函数: function setIcon(){ var inp

Android入门--实现选择并编辑图片设置成头像

在很多时候需要更换头像或者选择图片,所以这里总结下实现选择并编辑图片然后设置成头像的方法,下面开始: 整体结构如下:  创建项目,命名为ChooseImage_test 创建完成,在drawable-hdip文件夹中添加一张默认头像图片,用于在用户选择头像之前显示或者当用户未选择头像时做默认头像:  创建布局文件 这里为了贴合实际,整个页面就只有一个ImageView,当然现在是矩形的ImageView显示头像,后面会结合设置圆形头像的功能实现圆形头像选择功能 <RelativeLayout x

canvas剪裁图片并上传,前端一步到位,无需用到后端

背景: 当前主流的图片剪裁主要有两种实现方式. 1:flash操作剪裁.2:利用js和dom操作剪裁. 目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台, 然后后台来执行剪裁.我一直觉得这样有很多问题: 1.必须要先把图片上传到服务器然后才能执行后面的操作 2.前后端交互太多,需要几次交互数据 老的实现方法太low了.我想试试canvas来实现剪裁,就网上搜索了下,是有一些canvas剪裁,类似Jcrop这种.但是我发现好多canvas的插件, 本质

iOS开发中的错误整理,启动图片设置了没有效果;单独创建xib需要注意的事项;图片取消系统渲染的快捷方式

一.启动图片设置了没有效果 解决方案:缓存啊!卸了程序重新安装吧!!!!! 二.单独创建xib需要注意的事项 三.图片取消系统渲染的快捷方式

图片设置3D效果

/** * 图片绘制3d效果 * @param srcImage * @param radius * @param border * @param padding * @return * @throws IOException */ public static BufferedImage draw3D(BufferedImage srcImage, int radius, int border, int padding, Color bgColor) throws IOException{ in

Java 图片设置圆角(设置边框,旁白)

/** * 图片设置圆角 * @param srcImage * @param radius * @param border * @param padding * @return * @throws IOException */ public static BufferedImage setRadius(BufferedImage srcImage, int radius, int border, int padding) throws IOException{ int width = srcI