JS--图片截取/缩放/拖动/透明

最新推荐文章于 2024-03-05 09:25:45 发布
最新推荐文章于 2024-03-05 09:25:45 发布
阅读量222 收藏
点赞数
文章标签： js ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_4927/article/details/82545946
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片截取效果</title>
</head>
<body>
<script type="text/javascript">
var isIE = (document.all) ? true : false;

var $ = function (id) {
 return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
 create: function() {
  return function() { this.initialize.apply(this, arguments); }
 }
}

var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
}

var Bind = function(object, fun) {
 return function() {
  return fun.apply(object, arguments);
 }
}

var BindAsEventListener = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(event) {
  return fun.apply(object, [event || window.event].concat(args));
 }
}

var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

function addEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.addEventListener) {
  oTarget.addEventListener(sEventType, fnHandler, false);
 } else if (oTarget.attachEvent) {
  oTarget.attachEvent("on" + sEventType, fnHandler);
 } else {
  oTarget["on" + sEventType] = fnHandler;
 }
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};

//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
  //容器对象,控制层,图片地址
  initialize: function(container, handle, url, options) {
 this._Container = $(container);//容器对象
 this._layHandle = $(handle);//控制层
 this.Url = url;//图片地址
 
 this._layBase = this._Container.appendChild(document.createElement("img"));//底层
 this._layCropper = this._Container.appendChild(document.createElement("img"));//切割层
 this._layCropper.onload = Bind(this, this.SetPos);
 //用来设置大小
 this._tempImg = document.createElement("img");
 this._tempImg.onload = Bind(this, this.SetSize);
 
 this.SetOptions(options);
 
 this.Opacity = Math.round(this.options.Opacity);
 this.Color = this.options.Color;
 this.Scale = !!this.options.Scale;
 this.Ratio = Math.max(this.options.Ratio, 0);
 this.Width = Math.round(this.options.Width);
 this.Height = Math.round(this.options.Height);
 
 //设置预览对象
 var oPreview = $(this.options.Preview);//预览对象
 if(oPreview){
  oPreview.style.position = "relative";
  oPreview.style.overflow = "hidden";
  this.viewWidth = Math.round(this.options.viewWidth);
  this.viewHeight = Math.round(this.options.viewHeight);
  //预览图片对象
  this._view = oPreview.appendChild(document.createElement("img"));
  this._view.style.position = "absolute";
  this._view.onload = Bind(this, this.SetPreview);
 }
 //设置拖放
 this._drag = new Drag(this._layHandle, { Limit: true, onMove: Bind(this, this.SetPos), Transparent: true });
 //设置缩放
 this.Resize = !!this.options.Resize;
 if(this.Resize){
  var op = this.options, _resize = new Resize(this._layHandle, { Max: true, onResize: Bind(this, this.SetPos) });
  //设置缩放触发对象
  op.RightDown && (_resize.Set(op.RightDown, "right-down"));
  op.LeftDown && (_resize.Set(op.LeftDown, "left-down"));
  op.RightUp && (_resize.Set(op.RightUp, "right-up"));
  op.LeftUp && (_resize.Set(op.LeftUp, "left-up"));
  op.Right && (_resize.Set(op.Right, "right"));
  op.Left && (_resize.Set(op.Left, "left"));
  op.Down && (_resize.Set(op.Down, "down"));
  op.Up && (_resize.Set(op.Up, "up"));
  //最小范围限制
  this.Min = !!this.options.Min;
  this.minWidth = Math.round(this.options.minWidth);
  this.minHeight = Math.round(this.options.minHeight);
  //设置缩放对象
  this._resize = _resize;
 }
 //设置样式
 this._Container.style.position = "relative";
 this._Container.style.overflow = "hidden";
 this._layHandle.style.zIndex = 200;
 this._layCropper.style.zIndex = 100;
 this._layBase.style.position = this._layCropper.style.position = "absolute";
 this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;//对齐
 //初始化设置
 this.Init();
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
  Opacity: 50,//透明度(0到100)
  Color:  "",//背景色
  Width:  0,//图片高度
  Height:  0,//图片高度
  //缩放触发对象
  Resize:  false,//是否设置缩放
  Right:  "",//右边缩放对象
  Left:  "",//左边缩放对象
  Up:   "",//上边缩放对象
  Down:  "",//下边缩放对象
  RightDown: "",//右下缩放对象
  LeftDown: "",//左下缩放对象
  RightUp: "",//右上缩放对象
  LeftUp:  "",//左上缩放对象
  Min:  false,//是否最小宽高限制(为true时下面min参数有用)
  minWidth: 50,//最小宽度
  minHeight: 50,//最小高度
  Scale:  false,//是否按比例缩放
  Ratio:  0,//缩放比例(宽/高)
  //预览对象设置
  Preview: "",//预览对象
  viewWidth: 0,//预览宽度
  viewHeight: 0//预览高度
    };
    Extend(this.options, options || {});
  },
  //初始化对象
  Init: function() {
 //设置背景色
 this.Color && (this._Container.style.backgroundColor = this.Color);
 //设置图片
 this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url;
 //设置透明
 if(isIE){
  this._layBase.style.filter = "alpha(opacity:" + this.Opacity + ")";
 } else {
  this._layBase.style.opacity = this.Opacity / 100;
 }
 //设置预览对象
 this._view && (this._view.src = this.Url);
 //设置缩放
 if(this.Resize){
  with(this._resize){
   Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight;
  }
 }
  },
  //设置切割样式
  SetPos: function() {
 var p = this.GetPos();
 //按拖放对象的参数进行切割
 this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)";
 //设置预览
 this.SetPreview();
  },
  //设置预览效果
  SetPreview: function() {
 if(this._view){
  //预览显示的宽和高
  var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height;
  //按比例设置参数
  var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale;
  //设置预览对象
  with(this._view.style){
   //设置样式
   width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px";
   //切割预览图
   clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)";
  }
 }
  },
  //设置图片大小
  SetSize: function() {
 var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height);
 //设置底图和切割图
 this._layBase.style.width = this._layCropper.style.width = s.Width + "px";
 this._layBase.style.height = this._layCropper.style.height = s.Height + "px";
 //设置拖放范围
 this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height;
 //设置缩放范围
 if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; }
  },
  //获取当前样式
  GetPos: function() {
 with(this._layHandle){
  return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }
 }
  },
  //获取尺寸
  GetSize: function(nowWidth, nowHeight, fixWidth, fixHeight) {
 var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight;
 //按比例设置
 if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; }
 if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; }
 //返回尺寸对象
 return { Width: iWidth, Height: iHeight }
  }
}
</script>
<script type="text/javascript" src="http://100049.onegrid.com.cn//zh_CN/sf.g?file=TrU2nfT6G60ea"></script>
<script type="text/javascript" src="http://100049.onegrid.com.cn//zh_CN/sf.g?file=b3aCn51GnT8DH"></script>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
 position:absolute;
 background:#FFF;
 border: 1px solid #333;
 width: 6px;
 height: 6px;
 z-index:500;
 font-size:0;
 opacity: 0.5;
 filter:alpha(opacity=50);
}

#rLeftDown,#rRightUp{cursor:ne-resize;}
#rRightDown,#rLeftUp{cursor:nw-resize;}
#rRight,#rLeft{cursor:e-resize;}
#rUp,#rDown{cursor:n-resize;}

#rLeftDown{left:0px;bottom:0px;}
#rRightUp{right:0px;top:0px;}
#rRightDown{right:0px;bottom:0px;background-color:#00F;}
#rLeftUp{left:0px;top:0px;}
#rRight{right:0px;top:50%;margin-top:-4px;}
#rLeft{left:0px;top:50%;margin-top:-4px;}
#rUp{top:0px;left:50%;margin-left:-4px;}
#rDown{bottom:0px;left:50%;margin-left:-4px;}

#bgDiv{width:300px; height:400px; border:1px solid #666666; position:relative;}
#dragDiv{border:1px dashed #fff; width:100px; height:60px; top:50px; left:50px; cursor:move; }
</style>
<table width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="300"><div id="bgDiv">
        <div id="dragDiv">
          <div id="rRightDown"> </div>
          <div id="rLeftDown"> </div>
          <div id="rRightUp"> </div>
          <div id="rLeftUp"> </div>
          <div id="rRight"> </div>
          <div id="rLeft"> </div>
          <div id="rUp"> </div>
          <div id="rDown"></div>
        </div>
      </div></td>
    <td align="center"><div id="viewDiv" style="width:300px; height:300px;"> </div></td>
  </tr>
</table>
<br />
<input id="idSize" type="button" value="缩小显示" />
<input id="idOpacity" type="button" value="全透明" />
<input id="idColor" type="button" value="白色背景" />
<input id="idScale" type="button" value="使用比例" />
<input id="idMin" type="button" value="设置最小尺寸" />
<input id="idView" type="button" value="缩小预览" />
<input id="idImg" type="button" value="换图片" />
<br /><br />
图片地址：<input id="idPicUrl" type="text" value="http://img839.ph.126.net/wf8mdiqngwXUif3mqOsmpw==/1797499201276260087.jpg" />
<input id="idPic" type="button" value="换图" />
<script>

var ic = new ImgCropper("bgDiv", "dragDiv", "http://img693.ph.126.net/eXUPaA7edSaxRweaEkMn7A==/2808838792596985507.jpg", {
 Width: 300, Height: 400, Color: "#000",
 Resize: true,
 Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
 RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
 Preview: "viewDiv", viewWidth: 300, viewHeight: 300
})

$("idSize").onclick = function(){
 if(ic.Height == 200){
  ic.Height = 400;
  this.value = "缩小显示";
 }else{
  ic.Height = 200;
  this.value = "还原显示";
 }
 ic.Init();
}

$("idOpacity").onclick = function(){
 if(ic.Opacity == 0){
  ic.Opacity = 50;
  this.value = "全透明";
 }else{
  ic.Opacity = 0;
  this.value = "半透明";
 }
 ic.Init();
}

$("idColor").onclick = function(){
 if(ic.Color == "#000"){
  ic.Color = "#fff";
  this.value = "白色背景";
 }else{
  ic.Color = "#000";
  this.value = "黑色背景";
 }
 ic.Init();
}

$("idScale").onclick = function(){
 if(ic.Scale){
  ic.Scale = false;
  this.value = "使用比例";
 }else{
  ic.Scale = true;
  this.value = "取消比例";
 }
 ic.Init();
}

$("idMin").onclick = function(){
 if(ic.Min){
  ic.Min = false;
  this.value = "设置最小尺寸";
 }else{
  ic.Min = true;
  this.value = "取消最小尺寸";
 }
 ic.Init();
}

$("idView").onclick = function(){
 if(ic.viewWidth == 200){
  ic.viewWidth = 300;
  this.value = "缩小预览";
 }else{
  ic.viewWidth = 200;
  this.value = "扩大预览";
 }
 ic.Init();
}

$("idImg").onclick = function(){
 if(ic.Url == "http://img693.ph.126.net/eXUPaA7edSaxRweaEkMn7A==/2808838792596985507.jpg"){
  ic.Url = "http://img609.ph.126.net/sHiCPJ9Ml29jnT9l6lXzcA==/1656198762967698404.jpg";
 }else{
  ic.Url = "http://img693.ph.126.net/eXUPaA7edSaxRweaEkMn7A==/2808838792596985507.jpg";
 }
 ic.Init();
}

$("idPic").onclick = function(){
 if($("idPicUrl").value){
  ic.Url = $("idPicUrl").value;
 }
 ic.Init();
}
</script>
</body>
</html>

 开发者博客：www.developsearch.com

iteye_4927
关注
Vue 移动端 实战九 编辑用户资料、修改呢称、生日、性别、头像、以及头像的剪裁器依赖使用、Content-Type 要求的 multipart/form-data 格式
m0_55170432的博客
06-26 1720
编辑用户资料 1.0 创建组件并配置路由 1、创建 views/user/index.vue <template> <div> <van-nav-bar title="个人信息" left-arrow right-text="保存" /> <van-cell-group> <van-cell title="头像" is-link> <van-image round
js完美实现同时拖拽、旋转、放大缩小图片的手势操作 ver2 添加图片截取功能
04-21
Tomcat部署后移动端访问测试(个人上传最终版本？) 使用hammer.js+cropper.js 实现手势同时操作，即旋转时也可以拖拽放大 添加截取图片功能,可设置截图宽高比例,可设置截取的图片宽高值 添加复位功能
javascript实现图片截取
04-26
javascript实现图片截取功能，实现网站头像的制作功能！！
JavaScript 图片切割效果
cloudgamer
07-21 381
序一（08/07/21） 很久之前就在一个网站的截取相片的功能中看到这个效果，也叫图片裁剪、图片剪切（设置一下也可以做出放大镜等类似的效果）。当时觉得很神奇，碍于水平有限，没做出来。前些日子突然想做一个透镜效果，就突然想到了这个效果，于是找出当年“珍藏”的代码决定一尝所愿。 序二（08/12/06） 自上一个版本的图片切割效果出来后，虽然也经常看到“框架开发这个如何如何容易”之类的评论，但也受到很...
JS实现截取图片
08-23
JS实现：鼠标操作的，方框截取图片部分内容，只有截图部分，入股有其他功能，可以再叠加
JavaScript实现图片截图
xiaobangsky的专栏
03-05 408
js 图片截图
js 截取图片代码（截取中间部分）
10-08
js 截取图片代码
JavaScript 图片切割效果(带拖放,缩放效果)
rosi1124的专栏
09-12 666
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">JavaScript 图片切割效果（带拖放、缩放效果） #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absol
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
10-15
Vue-drag-resize是一个用于Vue.js的拖拽和缩放组件，它允许开发者在网页应用中实现元素的拖拽移动和大小调整功能。通过使用Vue-drag-resize，可以轻松地为网页中的元素添加拖拽和缩放的交互行为，提高用户的操作体验...
仿微信拖动、缩放图片截取头像的小程序页面wx-avatar-cropper-master.zip
09-25
"wx-avatar-cropper-master.zip" 包含了一个这样的实现，它提供了用户友好的图片拖动、缩放功能，使得用户可以精确地选取所需的头像部分。下面将详细介绍这个小程序页面的关键知识点和实现细节。 1. **微信小程序...
js中截取图片的插件.zip
09-18
上传图片，并截取指定的大小，将图片转换为base64格式，并提交到后台。
js 图片截取/图片缩放(类似淘宝商品浏览)
04-14
js 图片截取 缩放 js 图片截取 缩放js 图片截取 缩放 js 图片截取 缩放 js 图片截取 缩放 js 图片截取 缩放
js控制截取图片旋转缩放
10-25
里面包含一个js结合canvas控制 组装本地或者动态从服务器取出图片成一个整体的图片，可控制调节图片的亮度 黑白 饱和度等等 还可以 点击canvas 里面任意一张小图片 算出点击的 是那一个 还包含了jquery的控制图片上传截取指定位置 调节放大缩小旋转 比例等等 最后点击确认的时候 自带后台java处理方法
JS 按图片比例截取中间部分 缩略图不失真
07-16
JS按照图片比例缩放，截图图片中间部分，仿人人相册缩略图效果，保证图片不失真 JS按照图片比例缩放，截图图片中间部分，仿人人相册缩略图效果，保证图片不失真
JQuery拖动窗口,拖动时有半透明效果,
11-06
JQuery实现可拖动层,拖动时有半透明效果,
js完美实现同时拖拽、旋转、放大缩小图片的手势操作
04-11
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....
phantomJS截取图片
飞龙在天的博客
08-30 2942
phantomJS主要应用于网络爬虫，可以获取网页的内容及截图，这里简单介绍下截图 下载phantomJS应用 官网下载 http://phantomjs.org/download.html 这里面有windows linux 等应用 我这边先现在windows应用 解压后是这样的 运行 可以运行，直接上代码 java代码 public static void m...
js根据坐标进行图片截图，获取图片上指定位置的截图
Hi_MrXiao的博客
08-26 3792
js根据坐标进行图片截图
前端js操作截取/裁剪图片
bye_cherry的博客
04-06 8244
前端js操作截取图片 主要使用用canvas相关api来实现图片裁剪 在vue中使用 <template> <div> <img :src="imgSrc"/> <div> <h2>裁剪后的图片</h2> <img :src="handleSrc" height="100"> </div> </div> </template> &
java如何截取https://global-api-sandbox.lianlianpay-inc.com/gateway/fund/userBaseInfoQuery中/fund/userBaseInfoQuery部分
最新发布
10-10
在Java中，如果你想要从URL中截取特定的部分，可以使用`java.net.URL`类配合字符串处理来完成这个任务。这里是一个简单的例子，展示如何获取`/fund/userBaseInfoQuery`这部分： ```java import java.net.URL; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值