利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

<body>
 <div class="container demo">
  <div class="big">
   <p class="instructions">大图预览</p>
   <div class="bigframe">
    <img width="300" height="300" src="images/resized_pic.jpg" alt="" />
   </div>
  </div>
  <div class="small">
   <p>小图缩放</p>
    <div class="smallframe" >
    <div class="pre" id="preview">
     <img src="images/resized_pic.jpg" alt="" />
    </div>
   </div>
  </div>
 </div>
</body>

先总结一下：

　　最近练手，写了一些小东西，都是网上已有的成熟的JQ或JS，但在练手的过程中，我发现，很多应用，其实最后，都是归根到元素的宽高变化，位置变化，通过事件或算法，最后形成了效果或应用。

　　如果大家看到一些很炫的东西效果，其实都可以往宽高，位置，显示隐藏，这些方面去分析。一步一步深入。是一点个人体会。好吧，进入正题。

如何让左边选择区域的图像信息和右边的同步显示出来？

一、右边显示和左边同步：

　　左边选择一块区域，那么右边要和这个区域的图像信息相同？其实质，也就是要移动右边的图像，让移动后的右边图片，在显示区域当中，显示的图像信息，正好和左边的选择区域一样。

二、如何移动右边图像

　　要移动图片，也就是移动一个元素，可以有改变TOP LEFT值，这是在有绝对或相对定位的情况下。而这里，没有。

　　所以用到改变margin-top margin-left值的方式。

三、移动公式

上图中：黑色：图片，白色：选择区，红色：起始点，绿色：起始点的横纵坐标值； 黄色为:右边图片的margin-top,margin-left

假设：左边图片和右边图片，一样大小，宽和高都一样。我要在右边显示出左边白色区域的图像信息，就需要把右边图片的

margin-top值设为：红点的Y坐标值

margin-left值设为：红点的X坐标值

即：

margin-top = x;
margin-left = Y;

但是现在假设不成立，因为右边图片的大小，是随时变化的（第一篇分析中有）;

而变化是根据一个比例值来的。

所以这里不管是图片放大，还是缩小，原来

都应该乘以这个放大或缩小的比例值：

margin-top = scaleX*x;
margin-left = scaleX*Y;

好了，现在可以得到移动的位置值了。也就是说左边和右边可以同步显示图像信息了。

以上就是本文的全部内容，希望对大家有所帮助，有兴趣的朋友可以看下《利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）》，谢谢对我们的支持！

赞 (0)

相关推荐

  • javascript截图 jQuery插件imgAreaSelect使用详解

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

  • 利用jQuery插件imgAreaSelect实现获得选择域的图像信息

    利用jQuery插件imgAreaSelect实现获得选择域的图像信息

    还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息?  其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一

  • jQuery插件imgAreaSelect基础讲解

    jQuery插件imgAreaSelect基础讲解

    关于ImgAreaSelect,  是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:http://odyniec.net/projects/imgareaselect/ 中文:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html 在头部引用: <link rel="styl

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

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

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ［"区域":是宽*高,也就是面积:] ［"放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数］ 一.怎么能放大或者缩小图片的局部?

  • jquery imgareaselect 使用利用js与程序结合实现图片剪切

    复制代码 代码如下: /* 缺陷,当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){     this.pic_obj = jQuery("#"+pic_id);     this.pic_width;     this.pic_height;     this.view_d

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

    <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images

  • PHP+jQuery+Ajax实现多图片上传效果

    PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

  • jquery插件ajaxupload实现文件上传操作

    jquery插件ajaxupload实现文件上传操作

    本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp

  • 使用jquery.form.js实现图片上传的方法

    本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

  • jQuery实现移动端图片上传预览组件的方法分析

    本文实例讲述了jQuery实现移动端图片上传预览组件的方法.分享给大家供大家参考,具体如下: 之前的一篇博客:移动端H5图片预览和压缩,实现了基本的功能.这次则计划做成一个组件,可供前台.后台使用. 首先,我们先来捋一捋想要实现的功能: 预览 删除 压缩 上传到服务器 基本机构 这样,我们的组件结构就有了: ;!function(window, $, undefined){ function Upload() { }; Upload.prototype.change = function() {

  • 利用node+koa+axios实现图片上传和回显功能

    利用node+koa+axios实现图片上传和回显功能

    目录 前言 开发前需要掌握的一些库 代码结构 实现代码 前言 代码地址 开发前需要掌握的一些库 koa:用来起一个web服务器 koa2-cors: 解决跨域问题 @koa/router: koa的路由处理 koa-body: koa参数的获取 koa-static: 静态内容 @koa/multer multer:图片上传的插件 代码结构 实现代码 1.第一步:用koa+koa-router搭建一个简单的web服务 //main.js const Koa = require('koa') //

  • jQuery加PHP实现图片上传并提交的示例代码

    jQuery加PHP实现图片上传并提交的示例代码

    图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下 HTML代码 zimg.html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

随机推荐