js 拖拽，按等比例放大，缩小，任意修改图片大小，保存到word中

最新推荐文章于 2023-11-13 16:46:10 发布
最新推荐文章于 2023-11-13 16:46:10 发布
阅读量1.1k 收藏 2
点赞数
文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangjun2002/article/details/84092397
版权 
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312;" />
    <title>拖拽，按等比例放大，缩小，任意修改图片大小</title>
    <meta name="Keywords" content="图片拖拽，图片扥等比缩放" />
    <meta name="Description" content="在页面上实现图片拖拽并可以随意调整图片大小。 但如果按住Ctrl键之后，当再调整图片大小的时候需要按照比例进行调整。" />
  </head>
  <body>
  	<style type="text/css">
			.chr{cursor:e-resize;}
			.cvr{cursor:s-resize;}
			.cner{cursor:ne-resize;}
			.cnwr{cursor:nw-resize;}
			.cdft{cursor:default;}
			.cmove{cursor:move;}
    </style>
    <input type="button" οnclick="javascript:makeWord();" value="导出页面到Word"> 
		<img src="f:\\xnh.jpg" alt="PS梦幻效果" style="width:300px;position:absolute;left:100;top:100px;" id="imgsrc" class="cdft" />
		<script type="text/javascript">
			var img=document.getElementById('imgsrc');
			var span=10;
			var isDrag=null;
			var isIE=!!document.all;
			var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;
			var percent=img.offsetHeight/img.offsetWidth;
			function mouseMove(e){
			  e=e||event;
			  var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img.offsetWidth,imgH=img.offsetHeight;
			  if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img.className='cnwr';
			  else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img.className='cner';
			  else if(x<=span||x>=imgW-span)img.className='chr';
			  else if(y<=span||y>=imgH-span)img.className='cvr';
			  else img.className='cdft';
			  
			}
			function mouseDown(e){
			  e=e||event;
			  ex=e.clientX;//保存当前鼠标X轴的坐标
			  ey=e.clientY;//保存当前鼠标y轴的坐标
			  ox=parseInt(img.style.left);
			  oy=parseFloat(img.style.top);
			  if(img.className=='cdft'){
			    isDrag=true;
			    img.className='cmove';
			  }
			  else{
			    isDrag=false;
			    oh=img.offsetHeight;//获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
			    ow=img.offsetWidth;
			    var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY;//相对容器的水平坐标,相对容器的垂直坐标
			    chrPosX=x<=span;
			    chrPosY=y<=span;
			    if(e.ctrlKey){//事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住
			       ow=oh/percent;//根据比例计算出宽度
			       img.style.width=ow;//更新图片宽度
			    }
			  }
			  if(isIE)img.setCapture();  
			  document.οnmοusemοve=mouseDownAndMove;
			  img.οnmοusemοve=null;
			  return false;
			}
			function mouseDownAndMove(e){
			  e=e||event;
			  if(isDrag===true){
			    img.style.left=ox+e.clientX-ex+'px';
			    img.style.top=oy+e.clientY-ey+'px';
			  }
			  else if(isDrag===false){
			    var x=e.clientX-ex,y=e.clientY-ey;
			    switch(img.className){
			      case 'chr':
			        x=chrPosX?-x:x;
			        y=e.ctrlKey?percent*x+oh:oh;
			        img.style.width=ow+x+'px';
			        img.style.height=y+'px';
			        if(chrPosX)img.style.left=ox-x+'px';
			        break;
			      case 'cvr':
			        y=chrPosY?-y:y;
			        x=e.ctrlKey?y/percent+ow:ow;
			        img.style.width=x+'px';
			        img.style.height=oh+y+'px';
			        if(chrPosY)img.style.top=oy-y+'px';
			        break;
			      case 'cnwr':
			      case 'cner':
			        x=chrPosX?-x:x;
			        if(e.ctrlKey){//按宽等比
			          y=e.ctrlKey?percent*x+oh:oh;
			          img.style.width=ow+x+'px';
			          img.style.height=y+'px';
			          if(chrPosX)img.style.left=ox-x+'px';
			        }
			        else{          
			          y=chrPosY?-y:y;
			          img.style.width=ow+x+'px';
			          img.style.height=oh+y+'px';
			          if(chrPosX)img.style.left=ox-x+'px';
			          if(chrPosY)img.style.top=oy-y+'px';
			        }
			        break;
			    }
			  }
			}
			img.οnmοusemοve=mouseMove;
			img.οnmοusedοwn=mouseDown;
			document.οnmοuseup=function(){
			  if(typeof isDrag=="boolean"){
			    if(isIE)img.releaseCapture();//函数的作用就是将后续的mouse事件都发送给这个对象
			  }
			  isDrag=null;
			  img.className='cdft';
			  img.οnmοusemοve=mouseMove;
			  document.οnmοusemοve=null;
			}
			
			function makeWord() 
			{ 
				var word = new ActiveXObject("Word.Application"); 
				// var doc = word .documents.open("c:\test.doc"); //此处为打开已有的模版 
				var doc = word.Documents.Add("",0,1);//不打开模版直接加入内容 
				//var Range=doc.Range(); 
				//var sel = document.body.createTextRange();
				//sel.moveToElementText(img);
				//sel.select(); 
				//sel.execCommand("Copy"); 
				//Range.Paste(); 
				word.Application.Visible = true; 
				var pricture = word.Application.Selection.InlineShapes.AddPicture(img.src); 
				pricture.width=img.style.width.replace('px','');
				pricture.height=img.style.height.replace('px','');
				doc.saveAs("f:\\ba.doc"); //存放到指定的位置注意路径一定要是“\\”不然会报错 
			} 			
		</script> 
</body>
</html>

 

yangjun2002
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS调用word的模板 替换文字图片 设置图片大小
05-10
找了好久才调试成功，主要是导入图片设置图片尺寸比较麻烦，设置文字的demo比较多，但是很少有涉及到图片的demo ，好不容易找了一个分享一下
原始js实现图片的放大缩小，拖拽，截取指定部分
WuQingLaoXingXing的博客
07-26 1282
定义结构 <div class="img-intercep-wrap"> <div class="pic_wrapper"> <img src="./1.jpg"> <canvas class="pic_show"></canvas> </div> <button class="translate">截取</butt..
javascript实现对图片的随意拖拽,放大缩小
xiangqin的博客
06-26 1779
【JS】基于javascript实现对图片的随意拖拽,放大缩小 最近写项目的过程中需要对图片进行一个操作，点击之后弹出图片，在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小，双击图片恢复原图！对于我们这样后台程序员而言，这种前台效果实现起来确实有点勉强，在经过半个小时挣扎之后，终于完成效果，发表上来，以供广大后台程序员借鉴吧！ 第一步： body之内的代码如下： 1 2 ...
js设置图片放大缩小拖动
最新发布
zhou13528482267的博客
11-13 934
思路： 在外层box进行相对定位relative，img设置绝对定位absolute；通过监听滚轮事件（wheel），设置样式缩放中心点（transformOrigin）和缩放转换（transform）；获取到图片大小和位置，设置对应图片宽度高度和top、left偏移；鼠标按下事件（mousedown）和鼠标移动事件（onmousemove），得出图片移动偏移量。
怎么用js改变html里面的图片大小,网页中图片属性固定宽度，如何用js改变大小...
weixin_42374763的博客
06-04 2010
后台上传图片后，都有一个图片属性，会指定图片的宽和高，如果图片固定了宽度和高度，PC端用max-width可以控制最大宽度，高度自动缩放。但是手机端就没法自动缩放，可以使用js来改变图片的style，通过100%比例，当然也可以设置px固定的高度宽度。下面这些代码是摘自网上，测试了下还是比较好使的，主要也是为了解决网站电脑端和手机端共用一套数据时，造成的图片变形问题，由于后台上传图片时会自动设置图...
JavaScript实现图片的放大缩小及拖拽功能示例
10-17
这样我们可以在拖拽过程中获取到图片的当前`left`和`top`位置。 实现图片的拖拽功能则需要用到`mousedown`、`mouseup`和`mousemove`事件。当鼠标按下时，`startDrag`函数开始工作，记录当前鼠标的位置和图片的初始...
WPF实现图片放大，缩小，拖动示例
07-20
在WPF中处理图像是一项常见的任务，而图片的放大、缩小和拖动功能则是提高用户体验的重要组成部分。本示例将详细介绍如何在WPF中实现这些功能。 首先，我们需要了解WPF中的Image控件。Image控件是WPF提供的用于显示...
基于RxPaparazzo实现图片裁剪、图片旋转、比例放大缩小功能
08-30
对于图片的比例放大缩小，UCrop库默认支持按比例缩放，用户可以通过拖动裁剪框的边缘来调整图片大小。如果需要自定义缩放比例，可以使用UCrop提供的额外参数进行设置。 总结，通过引入RxPaparazzo库和UCrop库，我们...
JS可拖动放大缩小图片截图代码
04-09
在JavaScript（JS）中实现可拖动放大缩小的图片截图功能，是一种常见的前端交互设计，主要应用于网页上的图像查看和编辑。这个功能的核心是利用HTML5的Canvas元素和JavaScript的事件处理来完成。下面我们将详细探讨...
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
JavaScript实现选择框按比例拖拉缩放的方法
10-23
主要介绍了JavaScript实现选择框按比例拖拉缩放的方法,具有等比例缩放及设置最小范围等功能,涉及javascript事件的添加、监听、页面元素动态操作及鼠标事件的响应等技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js 实现图片放大 缩小 拖动功能
w1794340559的博客
05-09 1683
我是实现一个轮播图 加上放大缩小拖拽功能。
js实现图片放大缩小功能
qq_42077317的博客
03-19 9903
在web项目中，用到js来实现图片的放大缩小功能，在这里是通过zoomify来实现，并在这个基础上进行二次改进，已达到更满意的效果。 1.下面是展示的效果： 通过对zoomifyjs改进，达到上述效果。 2.下面是具体实现的代码： var currScale=1; var currRotate=0; var currScaleX=0; var currScaleY=0; ;(function($){ // initialization Zoomify = function (element, op
JS实现简单的图片拖拽和缩放功能
weixin_42380440的博客
12-06 706
工作需要，写了个简单的图片拖拽和缩放功能，有需要的可以参考一下 拖拽：（拖拽目标需要做定位，并设置draggable=“false”） popupDrag: function(ev){ var ev = ev || event; var obj = document.getElementById('img_li'); var disX = ev.clientX - obj....
Html+Css+Js图片放大可缓慢和移动（完整代码+详解）
qq_38170526的博客
08-02 2073
一，问题描述 当鼠标移动到图片上时，对应的大图片悬浮在鼠标的附近位置，而且移入的时候，图片时缓慢加载的，直到大图片被完全加载完成。当鼠标已经移入图片上时，以偶定的同时大图片也跟着移动。 二，效果预览 三，用到的主要事件 onmouseover：鼠标略过事件 onmouseout：鼠标移出事件 onmousemove：鼠标移动事件 window.onload：页面加载事件 四，遇到的问...
js实现图片的拖拽与缩放
qq_47657875的博客
08-30 375
【代码】实现图片的拖拽与缩放。
js实现图片的缩放、移动、旋转、拖拽
zbguolei的专栏
02-28 4232
JS代码 <script type="text/javascript"> function load() { init(); } // 缩放图片 function imgToSize(oBool) { var pic = document.getElementById("pic"); pic.style.zoom = parseInt(pic.style.zoom) + (oBoo...
JS实现鼠标滚轮缩小放大拖动图片代码
热门推荐
Java大表哥的博客
08-25 1万+
Jquery,JS实现鼠标滚轮缩小放大拖动图片代码 直接上代码：可以直接使用： 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... ) .dragAble {position:relative;cursor:move;} .img-con { position:relative; width: 713px;
C++ imshow 让显示的图片能拖动窗口大小，并等比例放大5倍显示
06-03
在 C++ 中使用 OpenCV 库的 imshow 函数显示图片时，默认情况下窗口大小是固定的，无法进行拖动调整。但是可以通过设置窗口属性来实现窗口大小可调整。同时，为了保证图片显示效果，可以设置窗口等比例显示。如果需要将图片放大一定倍数进行显示，也可以通过 resize 函数实现。具体实现方式如下： ```c++ #include <opencv2/opencv.hpp> using namespace cv; int main() { Mat img = imread("image.jpg"); namedWindow("image", WINDOW_NORMAL); // 设置窗口属性为可调整大小 resize(img, img, Size(img.cols * 5, img.rows * 5)); // 将图片放大5倍 imshow("image", img); resizeWindow("image", img.cols, img.rows); // 设置窗口初始大小与图片大小相同 while (waitKey(1) != 'q') // 按下 q 键退出循环 { int key = waitKey(1); if (key == 'r') // 按下 r 键重置窗口大小 { resizeWindow("image", img.cols, img.rows); } } return 0; } ``` 在上述代码中，通过 resize 函数将图片放大了5倍。同时，在程序中使用了一个 while 循环，通过不断等待键盘输入来检测用户是否按下了 q 键，以实现程序的退出。如果用户按下了 r 键，则使用 resizeWindow 函数将窗口大小重置为图片大小。这样，即可实现窗口大小可调整，并等比例放大5倍显示图片的效果。 需要注意的是，如果窗口大小调整过小，可能会导致图片无法完全显示或显示效果不佳。建议在设置窗口大小时，保证图片能够完整显示，同时不要太小，以免影响显示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值