利用jquery插件的图片剪切上传功能

为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。主要实现的形式有两种，一种是flash截图，另一种就是javascript截图，两种方法各有秋千，关于Flash截图可以参考一下UcHome程序中头像上传功能，但这不是我要讨论的话题，我这里主要是如何实现javascript截图，利用jQuery的imgAreaSelect插件，轻松实现自定义头像[avatar]javascript截图功能

首先，利用的是jquery上传剪切插件imgAreaSelect

官方下载地址：http://odyniec.net/projects/imgareaselect/

加压后里面有两个js文件

一个是jquery.min.js 另一个是 jquery.imgareaselect.js

将这两个js文件引入到项目中去

其次，在文件中要加入javascript代码

//预览显示

function preview(img, selection){

var scaleX = 100 / (selection.width || 1);

var scaleY = 100 / (selection.height || 1);

//动态小头像获取当前选中框的宽度，高度，左边框，右边框

$('#view').css({ //view是预览图像的id

width: Math.round(scaleX * 300) + 'px',

height: Math.round(scaleY * 220) + 'px',

marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',

marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'

});

}

//加载小头像

$(document).ready(function () {

$('<div><img id="view" src="bee.jpg" style="position: relative;" /></div>')

.css({

float: 'left',

position: 'relative',

overflow: 'hidden',

width: '100px',

height: '100px'

})

.insertAfter('#biuuu'); //把新建元素放到 #biuuu 之后

//.insertAfter($('#biuuu')); //把新建元素放到 #biuuu 之后

});

//初始化加载

$(window).load(function () {

$('#biuuu').imgAreaSelect({

aspectRatio: '1:1', //截取比例

//show:true,

//resizable:false, //是否可调整大小

autoHide: false,//选择框选择完毕是否自己取消

key:true, //是否启用键盘，默认为false

//x1: 75, y1: 30, x2: 225, y2: 180, //需要处理的区域，原始的

//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标

keys: { arrows: 1, ctrl: 5, shift: 'resize' }, //调整像素大小

//onInit: function(img, selection) { ias.setSelection(100, 50, 250, 150, true); ias.update(); }, //设置初始函数画出选择框

onSelectChange: preview , //选框移动时触发的事件

onSelectEnd: getLocation //选框结束时触发的事件

});

上述的详细参数配置在官网上也有，自己去查阅

最后，在文件中使用

<div>

<asp:Button ID="Button1" runat="server" Text="Button" οnclick="Button1_Click" />

</div>

说明：1.利用插件很容易做出来剪切预览效果，可是让我纠结了半天是：生成的预览图如何上传呀，在网上找了一段代码，发现只要是上传图片的大小不同，那么生成的图也不同，后来想想是缩放比例的问题。也就是说要实际图像的大小和在页面显示的大小是不一样的，被缩放了，那么在后台上传剪切图像的时候，我们必须要还原原来图像的大小，并把要剪切的部分也相应的要放大或缩小

代码：

System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(Server.MapPath("bee.jpg"));

int height = Convert.ToInt32(sourceImage.Height);//获取原始图像的高

int width = Convert.ToInt32(sourceImage.Width);//获取原始图像的宽度

x1 = x1*(width/320);//根据实际尺寸缩放

x2 = x2*(width/320);

y1 = y1*(height/240);

y2 = y2*(height/240);

未解决动态头像的功能，这是插件本身的问题

利用jquery插件的图片剪切上传功能相关推荐

php图片批量上传插件下载,jQuery的多图片批量上传插件
jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...
php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图效果图我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
imgareaselect + php 裁剪和上传,jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能
本文主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下,希望能帮助到大家. 上一节随笔中,我们已经知道了关于jQuery插件ImgAreaS ...
结合axios(formdata)+vue-cropper+element ui实现头像图片剪切上传
萌新用vue + axios + formdata 上传文件的爬坑之路 https://blog.csdn.net/qq_41688165/article/details/80834842 结合vue ...
JCK Editor 结合jQuery Upload File 增加图片批量上传功能
项目需准备文件: jQuery File Upload 上传插件,下载地址:https://github.com/JennerZhang/jQuery-File-Upload Joomla JFUpl ...
解决KindEditor无法安装flash插件实现图片批量上传
由于现在无法下载使用flash插件,导致KindEditor有的功能丧失,无法使用,本文主要解决图片无法批量上传的问题. 由于公司项目是混编项目,比较老旧且业务复杂,使用KindEditor的地方较多 ...
利用WeX5平台实现单图片上传功能
前段时间做过基于手机app的单图片上传.多图片上传的,现在把单图片上传的案例分享给有需要的朋友,欢迎有需要的朋友评论点赞,谢谢一.效果图二.开发思路图片上传主要是调用cordova插件,调用拍照 ...
layui+croppers完成图片剪切上传
不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head><meta charset="utf-8" /& ...
vue 实现ps图片编辑_Vue项目图片剪切上传——vue-cropper的使用
选择图片 ref="cropper":img="option.img":outputSize="option.size":outputTyp ...

利用jquery插件的图片剪切上传功能

利用jquery插件的图片剪切上传功能相关推荐

最新文章

热门文章