search
Homephp教程php手册php+ajax剪切图片
php+ajax剪切图片Jun 13, 2016 am 11:21 AM
background-imagephp+ajaxstyleurlwcutpicture


<script><br />//目标源<br />var target;<br />//拖拽辅助容器<br />var helper;<br />//鼠标默认状态(false=没有按下)<br />var iMouseDown=false;<br />//当前的目标源<br />var ctar;<br />//鼠标偏移量<br />var mouseOff;<br />//ajax相关<br />var ajax;<br />//继承number类的NANA0,用途为:如果一个数为100px会返回100。<br />Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br />//初始化AJAX<br />function createRequest(){<br />var ajax;<br />if(window.ActiveXObject){<br /> try{<br /> ajax = new ActiveXObject("Microsoft.XMLHTTP");<br /> }catch(e){<br /> ajax = false;<br /> }<br />}else{<br /> try{<br /> ajax = new XMLHttpRequest();<br /> }catch(e){<br /> ajax = false;<br /> }<br />}<br />if(!ajax){<br /> alert("Error creating the XMLHttpRequest object.");<br />}else{<br /> return ajax;<br />}<br />}<br />//反送AJAX请求<br />function cutp(cutC){<br />ajax=createRequest();<br />ajax.onreadystatechange = action;<br />//发送请求的URL<br />url = "path=./test1.jpg&x="+parseInt(cutC.style.left)+"&y="+parseInt(cutC.style.top)+"&width="+parseInt(cutC.offsetWidth)+"&height="+parseInt<br />(cutC.offsetHeight);<br />window.status = url;<br />ajax.open("GET", "image.php?"+url, true);<br />ajax.send(null);<br />}<br />function action(){<br />var show = document.getElementById("show");<br />//如果SHOW这个容器原先有子节点,就清楚子节点<br />if(show.hasChildNodes()){<br /> show.removeChild(show.childNodes[0]);<br />}<br />//状态为4&200的时候返回信息<br />if(ajax.readyState==4&&ajax.status==200){<br /> show.innerHTML = ajax.responseText;<br />}<br />}<br />//创建可拖拽容器<br />function createContainer(arg){<br />helper = document.getElementById('helper');<br />//设置属性<br />helper.setAttribute("cut",1);<br />arg.onmouseover = function(){<br /> helper.style.display="block";<br />}<br />arg.onmouseout = function(){<br /> helper.style.display="none";<br />}<br />helper.ondblclick = function(){<br /> cutp(helper);<br />}<br />}<br />//获取鼠标位置<br />function mouseCoords(ev){<br />if(ev.pageX || ev.pageY){<br /> return {x:ev.pageX, y:ev.pageY};<br />}<br />return {<br /> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br /> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br />};<br />}<br /><br />//获取鼠标在当前容器的偏移量<br />function getMouseOffset(target, ev){<br />ev = ev || window.event;<br />var docPos = getPosition(target);<br />var mousePos = mouseCoords(ev);<br />return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br />}<br />//获取鼠标相对父节点的偏移量<br />function getPosition(e){<br />var left = 0;<br />var top = 0;<br />while (e.offsetParent){<br /> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br /> top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br /> e = e.offsetParent;<br />}<br />left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br />top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br />return {x:left, y:top};<br />}<br />//鼠标移动处罚的函数<br />function mouseMove(ev){<br />ev = ev||window.event;<br />var tar = ev.target||ev.srcElement;<br />var mousePos = mouseCoords(ev);<br />var rootar = tar.parentNode;<br />var mouseOf = getPosition(rootar);<br />//判断状态<br />if(iMouseDown&&mouseOff){<br /> var limLefX=mouseOf.x+rootar.offsetWidth-tar.offsetWidth;<br /> var limBottomY =mouseOf.y+rootar.offsetHeight-tar.offsetHeight;<br /> var conLeft = mousePos.x-mouseOff.x;<br /> var conTop = mousePos.y-mouseOff.y;<br /> if(conLeft>=mouseOf.x&&conLeft<=limLefX){<br /> helper.style.left = mousePos.x-mouseOff.x;<br /> }<br /> if(conTop>=mouseOf.y&&conTop<=limBottomY){<br /> helper.style.top = mousePos.y-mouseOff.y;<br /> }<br />}<br />}<br /><br />//鼠标按键起来的函数<br />function mouseUp(){<br />iMouseDown = false;<br />}<br /><br />//按下鼠标按键的函数<br />function mouseDown(ev){<br />iMouseDown = true;<br />ev = ev||window.event;<br />var tar = ev.target||ev.srcElement;<br />if(tar.getAttribute("cut")){<br /> var hmouseOff = getPosition(tar);<br /> helper.style.left = hmouseOff.x;<br /> helper.style.top = hmouseOff.y;<br /> mouseOff = getMouseOffset(tar,ev);<br />}<br />}<br />//监听事件<br />document.onmouseup = mouseUp;<br />document.onmousemove = mouseMove;<br />document.onmousedown = mouseDown;<br />window.onload=function(){<br />target = document.getElementById("image");<br />createContainer(target);<br />}<br /></script>

#dragHelper


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
超简单!用 Python 为图片和 PDF 去掉水印超简单!用 Python 为图片和 PDF 去掉水印Apr 12, 2023 pm 11:43 PM

网上下载的 pdf 学习资料有一些会带有水印,非常影响阅读。比如下面的图片就是在 pdf 文件上截取出来的,今天我们就来用Python解决这个问题。安装模块PIL:Python Imaging Library 是 python 上非常强大的图像处理标准库,但是只能支持 python 2.7,于是就有志愿者在 PIL 的基础上创建了支持 python 3的 pillow,并加入了一些新的特性。pip install pillow pymupdf 可以用 python 访问扩展名为*.pdf、

剪切和复制有什么区别剪切和复制有什么区别Mar 22, 2024 pm 03:58 PM

1、剪切指的是将选定的内容从一个位置移动到另一个位置的操作。2、复制操作是在选定的内容上创建一个副本,并将这个副本保存在系统的剪贴板中,且原内容会保留在原来的位置上。3、如果用户想把内容移动到其他位置并删除原来的位置上的内容,就可以使用剪切操作。4、如果用户需要创建内容的副本,且在不影响原内容的情况下将其粘贴到其他地方,那就要使用复制操作。

PHP和GD库实现图片裁剪的方法PHP和GD库实现图片裁剪的方法Jul 14, 2023 am 08:57 AM

PHP和GD库实现图片裁剪的方法概述:图片裁剪是网页开发中常见的需求之一,它可以用于调整图片的尺寸,剪裁不需要的部分,以适应不同的页面布局和展示需求。在PHP开发中,我们可以借助GD库来实现图片裁剪的功能。GD库是一个强大的图形库,可提供一系列函数来处理和操控图像。代码示例:下面我们将详细介绍如何使用PHP和GD库来实现图片裁剪。首先,确保你的PHP环境已经

如何使用 Vue 实现图片预加载?如何使用 Vue 实现图片预加载?Jun 25, 2023 am 11:01 AM

在网页开发中,图片预载是一种常见的技术,可以提升用户的体验感。当用户浏览网页时,图片可以提前下载并加载,减少图片加载时的等待时间。在Vue框架中,我们可以通过一些简单的方法来实现图片预载。本文将介绍Vue中的图片预载技术,包括预载的原理、实现的方法和使用注意事项。一、预载的原理首先,我们来了解一下图片预载的原理。传统的图片加载方式是等到图片全部下载完成才显示

PS AI修图免费平替来了!Stability AI又放大招,核弹级更新一键扩图PS AI修图免费平替来了!Stability AI又放大招,核弹级更新一键扩图Jun 12, 2023 pm 07:27 PM

此前,PS的重建图像功能就让人无比振奋,让无数人惊呼今天,StabilityAI又放大招了。它联合Clipdrop推出了UncropClipdrop——一个终极图像比例编辑器。从Uncrop这个名字上,我们就能看出它的用途。它是一个AI生成的「外画」工具,通过创建扩展背景,这个工具可以补充任何现有照片或图像,来更改任何图像的比例。敲黑板:通过Clipdrop网站,就可以免费试用这个工具了,无需登录!比例任意调,满意为止Uncrop基于StabilityAI的文本到图像模型StableDiffus

vue报错找不到图片怎么办vue报错找不到图片怎么办Nov 19, 2022 pm 05:01 PM

vue报错找不到图片的解决办法:1、修改配置文件,将绝对路径改为相对路径;2、将图片作为模块加载进去,并将图片放到static目录下;3、将imageUrls引入响应的vue文件中,解析引用即可。

如何在uniapp中实现图片滤镜效果如何在uniapp中实现图片滤镜效果Jul 04, 2023 am 11:05 AM

如何在uniapp中实现图片滤镜效果在移动应用开发中,图片滤镜效果是一种常见且受用户喜爱的功能之一。而在uniapp中,实现图片滤镜效果也并不复杂。本文将为大家介绍如何通过uniapp实现图片滤镜效果,并附上相关代码示例。导入图片首先,我们需要在uniapp项目中导入一张图片,以供后续滤镜效果的处理。可以在项目的资源文件夹中放置一张命名为“filter.jp

php写图片不显示不出来怎么办php写图片不显示不出来怎么办Nov 14, 2022 am 10:17 AM

php写图片不显示不出来的解决办法:1、找到并打开php.ini文件;2、找到“extension=php_gd2.dll”,并将前面的分号去掉;3、重新启动服务器;4、在绘图前清一下缓存即可。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),