`
ynial
  • 浏览: 228099 次
  • 来自: ...
社区版块
存档分类
最新评论

[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放!

阅读更多
在开发中难免碰到图片上传问题!图片上传问题很好解决,而上传到服务器上的图片尺寸大小不一,使表现层无法使用统一的规格显示被上传的图片。
那么被上传的图片的 等比例缩 与等比率放 还有等比率截图 可能会给我们的开发带来障碍!
使用 jquery.imgareaselect图片处理插件完全可以解决这方面的问题;


jquery.imgareaselect 官方网站:http://odyniec.net/projects/imgareaselect/

例1:

$(window).load(function () {
  $('#myimg').imgAreaSelect({ selectionColor: 'blue', selectionOpacity: 0.2,
    borderWidth: 2 });
});

myimg:需要处理的图片
selectionColor:选择区域颜色
selectionOpacity:选择区域透明度
borderWidth:选择层边框大小
如果使用selectionColor参数  就必须设置selectionOpacity(透明度)


例2:等比率选择 并设置选择区域最大宽高

$(window).load(function () {
  $('#myimg').imgAreaSelect({aspectRatio: '4:3', maxWidth: 400, maxHeight: 300});
});

myimg:需要处理的图片
aspectRatio:选择框宽高比率
maxWidth:选择区域透宽最大值
maxHeight:选择区域透高最大值

例3:默认选择区域设置 与 键盘支持
$(window).load(function () {
  $('#myimg').imgAreaSelect({ x1: 0, y1: 0, x2: 400, y2: 300,keys: { arrows: 15, shift: 5 } });
});

myimg:需要处理的图片
x1:右上角x轴坐标
y1:右上角y轴坐标
x2:右下角x轴坐标
y2:右下角y轴坐标
key:开启键盘支持


例4:最关键的一个 等比率缩放
实现原理 需要两个图片 第一图是原图 第二个图是选择区域后显示的图
         用第一个图上的选择坐标+css控制 产生第二个图 实际上两个图是一样的 只不过通  
         过css控制了第二张图的显示区域与缩放比率 如果需要实现真正截图功能必须使用
         服务器端支持。 例如php  asp aspx jsp ......

代码如下
function preview(img, selection)
{
  var scaleX = 100 / (selection.width || 1);
  var scaleY = 100 / (selection.height || 1);

  $('#myimg + div > img').css({
    width: Math.round(scaleX * 400) + 'px',
    height: Math.round(scaleY * 300) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });
}

$(document).ready(function () {
  $('<div><img src="myimg.jpg" style="position: relative;" /></div>')
    .css({
      float: 'left',
      position: 'relative',
      overflow: 'hidden',
      width: '100px',
      height: '100px'
    })
    .insertAfter($('#myimg'));
});

$(window).load(function () {
  $('#myimg').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});


myimg:需要处理的图片
onSelectChange:选择区域发生变化的时候回调处理
function preview(img, selection):回调函数

var scaleX = 100 / (selection.width || 1); 100->新图的宽
var scaleY = 100 / (selection.height || 1);100->新图的高



width: Math.round(scaleX * 400) + 'px', 400->原图的宽
height: Math.round(scaleY * 300) + 'px', 300->原图的高


$('<div><img src="myimg.jpg" style="position: relative;" /></div>')
    .css({
      float: 'left',
      position: 'relative',
      overflow: 'hidden',
      width: '100px',
      height: '100px'
    })

100px 是选择后新图显示区域的宽和高

值得注意的是:

   回调函数中实际图的宽高  回调函数中新图的宽高
   这些参数必须设置正确、否则会出现 选择偏差



接下来服务器端处理 先说 php 如何处理
$x = $_GET['x'];//客户端选择区域左上角x轴坐标
$y = $_GET['y'];//客户端选择区域左上角y轴坐标
$w = $_GET['w'];//客户端选择区 的宽
$h = $_GET['h'];//客户端选择区 的高
$filename = "c:/myimg";//图片的路径
$im = imagecreatefromjpeg($filename);// 读取需要处理的图片
$newim = imagecreatetruecolor(100, 100);//产生新图片 100 100 为新图片的宽和高

imagecopyresampled($newim, $im, 0, 0, $x, $y, 100, 100, $w, $h);
//                  [1]    [2] [3][4] [5] [6] [7]  [8]  [9] [10]
//[5]  客户端选择区域左上角x轴坐标
//[6]  客户端选择区域左上角y轴坐标
//[7]  生成新图片的宽
//[8]  生成新图片的高
//[9]  客户端选择区 的宽
//[10] 客户端选择区 的高          
imagejpeg($newim, $filename);
imagedestroy($im);
imagedestroy($newim);


分享到:
评论

相关推荐

    jquery.imgareaselect-0.9.2几种封装

    《jQuery.imgAreaSelect-0.9.2封装详解》 在网页开发中,图像选取功能是常见的需求之一,尤其在图像处理、编辑或上传场景中。jQuery.imgAreaSelect是一款非常实用的jQuery插件,用于实现图像区域选择的功能,它允许...

    jquery.imgareaselect-0.8.min.js

    jquery.imgareaselect-0.8.min.js

    jquery的imgareaselect截图插件

    《jQuery的imgAreaSelect截图插件深度解析》 在网页开发中,我们常常需要实现图片的裁剪功能,以便用户可以自由选择感兴趣的部分进行保存或处理。jQuery的imgAreaSelect插件为此提供了一个简单易用的解决方案。这篇...

    jquery.imgareaselect

    《jQuery.imgAreaSelect:图像上传与裁剪的高效解决方案》 在Web开发中,尤其是在涉及到用户交互和多媒体处理时,图像上传与裁剪功能是非常常见且重要的。jQuery.imgareaselect是一个专门针对这一需求的JavaScript...

    jquery.imgareaselect-0.9.10插件下载

    jquery.imgareaselect-0.9.10图片裁切插件下载,可把上传的图片进行裁剪再保存,在以前来说非常棘手的问题,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现图片裁切功能。注,本插件包内不包括...

    利用jquery的imgAreaSelect插件实现图片裁剪示例

    在网页开发中,图片裁剪是一项常见的功能,用于让用户自定义选择图片的显示区域或预览效果。...通过合理配置和使用,开发者可以轻松集成这一功能到自己的项目中,提高用户体验,同时也减轻了服务器端的图片处理负担。

    jquery的imgareaselect插件

    jQuery的imgAreaSelect插件正是一款强大的图片选区工具,它提供了简单易用的API,帮助开发者轻松实现这一功能。下面我们将深入探讨imgAreaSelect插件的原理、使用方法以及一些实用技巧。 **一、插件简介** ...

    jQuery插件imgAreaSelect 实例代码

    `imgAreaSelect`是一个基于jQuery的插件,它提供了在网页上选择图片区域的功能,常用于图片裁剪或选取特定部分。这个插件易于集成,灵活性高,且适用于各种项目,特别是那些需要用户自定义图片裁剪范围的应用。 ###...

    javascript截图 jQuery插件imgAreaSelect用法详解_.docx

    ### JavaScript截图 jQuery插件imgAreaSelect用法详解 #### 一、引言 在Web开发中,用户自定义头像的功能越来越受到重视。为了提供更好的用户体验,很多网站尤其是社交网络平台,都允许用户通过简单的操作来自定义...

    jQuery插件imgAreaSelect基础讲解

    《jQuery插件imgAreaSelect基础详解》 imgAreaSelect是一个基于jQuery的插件,它的主要功能是让用户通过鼠标拖曳来选择图片中的...通过深入理解和灵活运用其选项及API,开发者可以创建出满足各种需求的图片处理功能。

    jquery_imgareaselect图片裁切插件使用的中文文档

    `jQuery_imgareaselect` 是一个用于图片裁剪的JavaScript插件,它允许用户通过鼠标在图片上选择一个矩形区域,然后可以...在实际应用中,可以根据项目需求调整选项和集成到后端裁剪服务,以实现完整的图片处理流程。

    基于jquery网页截图插件(imgareaselect)

    【基于jQuery网页截图插件(imgareaselect)】是一个用于网页截取图像选定区域的JavaScript库,它与jQuery框架紧密集成,为用户提供了一个简单易用的交互式选择工具。这个插件允许用户在网页上自由划定一个矩形区域...

    jquery图片裁剪插件imgareaselect

    《jQuery图片裁剪插件imgareaselect详解与实践》 在现代网页设计中,用户交互体验愈发重要,其中图片裁剪功能常用于头像编辑、图片上传预览等场景。jQuery图片裁剪插件imgareaselect便应运而生,它提供了简单易用的...

    JQuery插件imgAreaSelect_Demo

    `imgAreaSelect`可以与各种前端框架(如Bootstrap、Vue、React等)或图片处理库(如Cropper.js)结合使用,以实现更复杂的功能。 7. **常见问题与解决方案** - **兼容性问题**:确保目标浏览器支持jQuery,以及`...

    jquery+php实现实现突破上传及裁剪功能

    在IT行业中,前端开发经常需要处理用户上传图片并进行预处理,例如裁剪,以满足特定的展示需求。本教程将深入讲解如何使用jQuery和PHP技术实现这一功能,结合`.imgareaselect`插件,我们可以创建一个强大的图片上传...

    jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像

    在IT行业中,前端开发经常需要处理用户上传图片的需求,而"jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像"这个主题,就是一种高效且用户体验优秀的解决方案。接下来,我们将深入探讨这些技术及其整合...

    imgareaselect裁剪图片

    在IT行业中,图片处理是一项非常常见的任务,尤其是在网站开发、图像编辑和用户交互设计中。本文将详细讨论“imgareaselect裁剪图片”这一技术,以及如何利用它来实现图片上传与裁剪功能。 “imgareaselect”是一个...

    ASP.NET JQuery ImgAreaSelect 实现上传图片在线剪裁

    ASP.NET是一种基于.NET Framework的服务器...这不仅提高了用户的交互性,也为图片处理提供了一种灵活的方法。在实际项目中,你可能还需要考虑错误处理、图片大小限制、安全问题(如防止XSS攻击)以及其他性能优化策略。

    imguploadncrop

    "imguploadncrop"项目正是针对这一需求,提供了一套完整的解决方案,它基于jQuery.imgAreaSelect-0.9.10插件,实现了网页上的截图上传功能,并结合PHP后端代码处理上传的图片,确保了用户体验和数据安全。...

    jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

    jQuery插件ImgAreaSelect是一个能够为图片添加可拖拽的裁剪框的插件,适合于在网页上实现图片上传预览和裁剪功能。为了实现头像上传、预览以及裁剪功能,我们需要遵循以下步骤: 首先,要明确目标功能: 1. 图片...

Global site tag (gtag.js) - Google Analytics