图片上传，图片旋转，拖拽

能够支持IE，谷歌，火狐浏览器（兼容多浏览器不容易啊）

下面仅提供核心思想和部分代码：

 拖拽:是使用网上现成的JS代码，在此基础上进行适当的修改即可满足自己的需求，最主要的就是判定拖拽的范围，上传的图片不能给拖没了，所以加上个范围限定，判断超出了这个范围便拖拽无效果。

旋转与缩放要区分浏览器..

旋转:IE浏览器下想要实现图片的旋转很简单只要调用IE提供的滤镜filter参数为一个旋转矩阵即可.谷歌和火狐浏览器图片显示用的是canvas标签而不是img标签所以图片的旋转需要用canvas标签相关的一些方法来实现（跟HTML5类似或者说就是Html5,本人才疏学浅理解不透）,并且旋转相关的数据需要自己进行数学计算。

缩放: IE下要实现图片的缩放很简单只要把img标签对应的width与length值增大或者缩小就可以,但是火狐和谷歌下的canvas标签是一个完全不同的处理方式。这是比较纠结的...详细可以看看代码.

效果图如下：

本身这个功能是在一个大项目中由于机密不能在大项目中展示运行,我后来自己简单的建了一个小项目单独的运行这个功能。

部分代码如下：

[plain] view plain copy

print?

  1. /**
  2. * 图片旋转方法
  3. * @param id 被旋转的图片
  4. * @param angle 旋转的角度
  5. * @param whence (此参数不传的话 旋转的角度会默认累加)
  6. */
  7. function rotate(id,angle,whence) {
  8. var p = document.getElementById(id);
  9. // we store the angle inside the image tag for persistence
  10. if (!whence) {
  11. p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;  //whence (此参数不传的话 旋转的角度会默认累加)
  12. } else {
  13. p.angle = angle;
  14. }
  15. if (p.angle >= 0) {
  16. var rotation = Math.PI * p.angle / 180;
  17. } else {
  18. var rotation = Math.PI * (360+p.angle) / 180;
  19. }
  20. var costheta = Math.cos(rotation);
  21. var sintheta = Math.sin(rotation);  //数学知识....
  22. if (document.all && !window.opera) {//IE下 用img标签
  23. var canvas = document.createElement(‘img‘);
  24. canvas.src = p.src;  //将之前图片的src,height,width值赋予canvas
  25. canvas.height = p.height;
  26. canvas.width = p.width;
  27. //用IE的滤镜(用了矩阵知识)实现图片的旋转展示
  28. canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod=‘auto expand‘)";
  29. } else {
  30. //火狐谷歌浏览器下用canvas标签
  31. var canvas = document.createElement(‘canvas‘);
  32. if (!p.oImage) {
  33. //新建canvas标签的oImage对象 用来存储图片信息
  34. canvas.oImage = new Image();
  35. canvas.oImage.src = p.src;
  36. canvas.oImage.height = p.height;
  37. canvas.oImage.width = p.width;
  38. } else {
  39. canvas.oImage = p.oImage;
  40. }
  41. //计算旋转之后的canvas标签的长和宽（不是图片的长和宽) 旋转之后oImage的height与width值不变
  42. canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);  //数学知识...
  43. canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
  44. //调用一些底层方法进行旋转并展示旋转之后的图片
  45. var context = canvas.getContext(‘2d‘);
  46. context.save();
  47. if (rotation <= Math.PI/2) {
  48. context.translate(sintheta*canvas.oImage.height,0);
  49. } else if (rotation <= Math.PI) {
  50. context.translate(canvas.width,-costheta*canvas.oImage.height);
  51. } else if (rotation <= 1.5*Math.PI) {
  52. context.translate(-costheta*canvas.oImage.width,canvas.height);
  53. } else {
  54. context.translate(0,-sintheta*canvas.oImage.width);
  55. }
  56. context.rotate(rotation);
  57. context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);  //将旋转之后的oImage对象绘制出来
  58. context.restore();
  59. }
  60. canvas.id = p.id;
  61. canvas.angle = p.angle;
  62. p.parentNode.replaceChild(canvas, p);  //将新的canvas 标签 替换之前的标签 从而可以展示旋转之后的图片
  63. //设置canvas元素的top值与left值     (图片旋转之后top值与left值都发生了变化 现在是要满足图片绕自己的中心的进行旋转，所以旋转之后要进行top与left值的设定)
  64. canvas.style.top =(y_center-(canvas.offsetHeight)/2)+"px";//注意加上"px"
  65. canvas.style.left = x_center-canvas.offsetWidth/2+"px";
  66. var imgpos = getStylepos(canvas);//与ImageCopper.js的里面的checkcutpos一样的效果
  67. max_x = Math.max(offsetx, offsetx + cutx - canvas.offsetWidth);
  68. min_x = Math.min(offsetx + cutx - canvas.offsetWidth, offsetx);
  69. if (imgpos.x > max_x)
  70. canvas.style.left = max_x + ‘px‘;
  71. else if (imgpos.x < min_x)
  72. canvas.style.left = min_x + ‘px‘;
  73. max_y = Math.max(offsety, offsety + cuty - canvas.offsetHeight);
  74. min_y = Math.min(offsety + cuty - canvas.offsetHeight, offsety);
  75. if (imgpos.y > max_y)
  76. canvas.style.top = max_y + ‘px‘;
  77. else if (imgpos.y < min_y)
  78. canvas.style.top = min_y + ‘px‘;
  79. x_center = Math.round(canvas.offsetWidth/2)+imgpos.x;//top值与left值变化后需要重新计算图片的中心点
  80. if(x_center -142<=1 &&x_center -142>=-1)
  81. {
  82. //防止图片在预览区中心点旋转之后 导致中心点发生微小的偏离
  83. x_center=142;
  84. }
  85. y_center = Math.round(canvas.offsetHeight/2)+imgpos.y;
  86. if(y_center +133<=1 && y_center +133>=-1){
  87. y_center=-133;
  88. }
  89. }

[plain] view plain copy

print?

    1. //图片逐步缩放
    2. function imageresize(flag) {
    3. //增加浏览器类型判断
    4. var userAgent = navigator.userAgent.toLowerCase();
    5. jQuery.browser = {
    6. version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,‘0‘])[1],
    7. safari: /safari/.test( userAgent ),
    8. opera: /opera/.test( userAgent ),
    9. msie: /msie/.test( userAgent ),
    10. firefox: /firefox/.test( userAgent ),
    11. chrome: /chrome/.test( userAgent )
    12. };
    13. var rate = 1.08;//此值的设定是为了满足正好放大10次缩小10次这种需求的(需求要求只能放大一倍缩小一倍，为了点击10次正好放大一倍rate就设为了此值)
    14. if($.browser.firefox || $.browser.chrome)
    15. {
    16. rate = 1.07;
    17. }
    18. cut_div = document.getElementById(‘cut_div‘);
    19. if (flag) {//放大
    20. if (zoom > 2*standardzoom) //超过标准比例的2倍的话就不能进行缩放
    21. return;
    22. zoom = zoom * rate;
    23. } else {//缩小
    24. if (zoom < standardzoom/2)
    25. return;
    26. zoom = zoom / rate;
    27. }
    28. if (document.all && !window.opera) {//IE浏览器下
    29. cut_img.width = Math.round(imgdefw * zoom); //只需要改变img标签的width和height 就可以实现缩放了
    30. cut_img.height = Math.round(imgdefh * zoom);
    31. cut_img.style.top =(y_center-(cut_img.offsetHeight)/2)+"px"; //缩放之后 图片的中心不发生变化 top与left值发生相应的变化
    32. cut_img.style.left = x_center-cut_img.offsetWidth/2+"px";
    33. }else{//火狐谷歌等浏览器
    34. //首先改变canvas.oImage的width与height属性的值
    35. if(flag){
    36. var image_y=cut_img.oImage.height*rate;
    37. var image_x=cut_img.oImage.width*rate;
    38. }else{
    39. var image_y=cut_img.oImage.height/rate;
    40. var image_x=cut_img.oImage.width/rate;
    41. }
    42. cut_img.oImage.height=image_y;
    43. cut_img.oImage.width=image_x;
    44. roTateRight(‘cut_img‘,0);//旋转0度以调整canvas的width与height值和left与top的值
    45. }
    46. checkcutpos();
    47. }
时间： 2024-10-29 20:54:24

图片上传，图片旋转，拖拽的相关文章

yii 图片上传 图片处理

用yii自带的CUploadfile进行图片的上传,因为这个类只提供上传的功能,并没有图片的处理功能比如图片的缩减.锐化.旋转等,所以必须借助yii的扩展image来实现. 一.图片上传 数据表: CREATE TABLE `img_show` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(150) DEFAULT NULL, `url` varchar(100) DEFAULT NULL, `img_path`

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除，限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css&qu

jQuery插件之路(三)——文件上传（支持拖拽上传）

好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader()

spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除，限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE b

图片上传,图片加水印,验证码制作

文件上传: 所用控件:FileUpload 使用时的思路: 1.判断用户是否选中了文件 FileUpload.FileName获取选中的文件名,判断长度,如果长度大于零就代表已经选择了文件 JS端:通过ID获取控件,然后控件的value获取选中的文件名 2.将文件保存到服务器上 FileUpload.SaveAs("绝对路径"); 3.获得绝对路径 先编写相对路径:比如"UpLoads/abc.txt" 再把路径映射成绝对路径:Server.MapPath(&quo

uedit 富文本编辑器 图片上传 图片服务器

uedit设置 修改uploader 类   源代码这个注释 $url = "upimg.com/uploadImg.php"; $tmpName = $file['name']; //上传上来的文件名 $tmpFile = $file['tmp_name']; //上传上来的临时存储路径 $tmpType = $file['type']; //上传上来的文件类型 $folder = 'goods_uedit'; //存储路径 //执行上传 $data = json_decode($t

图片上传组件开发

我就要自行车 - 需求整理 放眼WWW,一般的图片上传模块,主要就是实现了三个功能,图片的预览,图片的剪裁及预览,图片的上传,那我也就整这么一个吧,再细化一下需求. 图片的预览 用户使用:用户点击“选择图片”,弹出文件浏览器,可以选择本地的图片,点击确认后,所选图片会按照原始比例出现在页面的浏览区域中. 组件调用:开发者可以自己定义图片预览区域的大小,并限定所传图片的文件大小和尺寸大小. 图片的剪裁 用户使用:用户根据提示,在预览区域的图片上拖动鼠标框出想要上传的图片区域,并且能在结果预览区域看

Jquery自定义图片上传插件

1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2.该图片上传插件实现功能如下: 1>能够异步上传,上传成功之后,服务器返回响应结果:能够定义上传前和上传后自定义处理方式: 2>能够实现文件格式判断,过滤非图片文件: 3>服务端能够过滤重复上传的图片: 3.页面代码分析: 1>.Jquery图片上传插件代码如下: // 选中文件, 提

rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能

之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑器,多方考虑选择了bootstrap3-wysiwyg,但是这个编辑器无法实现图片上传功能,还有换行使用br而不是p标签不是很好.于是考虑自定义完善其功能. 个人原创,版权所有,转载请注明原文出处,并保留原文链接: https://www.embbnux.com/2015/03/17/rails_u