图片上传前用JS代码进行预览并编辑裁剪区域

JavaScript014

图片上传前用JS代码进行预览并编辑裁剪区域,第1张

http://love21cn.msn.com.cn的图片上传功能后可以实现区域截图,也可以实现放大缩小...估计是用了JS来实现的:

var div_move = 0

var IE = document.all?true:false

var tempX,tempY,oldX,oldY

var have_move = 0

function grasp()

{

div_move = 1

if(IE)

{

document.getElementById("source_div").setCapture()

}

}

function free()

{

div_move = 0

have_move = 0

document.getElementById("source_div").releaseCapture()

}

function getMouseXY(e)

{

if (IE)

{ // grab the x-y pos.s if browser is IE

tempX = event.clientX + document.body.scrollLeft

tempY = event.clientY + document.body.scrollTop

}

else

{

// grab the x-y pos.s if browser is NS

tempX = e.pageX

tempY = e.pageY

}

// catch possible negative values in NS4

if (tempX <0){tempX = 0}

if (tempY <0){tempY = 0}

}

function move_it(e)

{

getMouseXY(e)

if(div_move == 1)

{

if(have_move == 0)

{

//alert('a')

oldX = tempX

oldY = tempY

have_move = 1

}

var left = parseInt(document.getElementById("source_div").style.left)

var top = parseInt(document.getElementById("source_div").style.top)

//alert(top)

//alert(left)

//alert(tempX)

//alert(oldX)

document.getElementById("source_div").style.left = left + tempX - oldX

document.getElementById("source_div").style.top = top + tempY - oldY

oldX = tempX

oldY = tempY

}

}

function change_size(method)

{

if(method == 1)

{

var per = 1.25

}

else

{

var per = 0.8

}

document.getElementById("show_img").width = document.getElementById("show_img").width*per

//document.getElementById("show_img").height = document.getElementById("show_img").height*per

}

function micro_move(method)

{

switch (method)

{

case "up":

var top = parseInt(document.getElementById("source_div").style.top)

document.getElementById("source_div").style.top = top - 5

break

case "down":

var top = parseInt(document.getElementById("source_div").style.top)

document.getElementById("source_div").style.top = top + 5

break

case "left":

var left = parseInt(document.getElementById("source_div").style.left)

document.getElementById("source_div").style.left = left - 5

break

case "right":

var left = parseInt(document.getElementById("source_div").style.left)

document.getElementById("source_div").style.left = left + 5

break

}

}

function turn(method)

{

var i=document.getElementById('show_img').style.filter.match(/\d/)[0]

//alert(i)

i=parseInt(i)+parseInt(method)

//alert(i)

if(i<0)

{

i += 4

}

if(i>=4)

{

i -= 4

}

//alert(i)

document.getElementById('show_img').style.filter='progid:DXImageTransform.Microsoft.BasicImage(Rotation='+i+')'

}

function mysub()

{

var Oform = document.myform

Oform.go.value = 1

Oform.width.value = document.getElementById("show_img").width

Oform.left.value = document.getElementById("source_div").style.left

Oform.top.value = document.getElementById("source_div").style.top

if(IE)

{

Oform.turn.value = document.getElementById('show_img').style.filter.match(/\d/)[0]

}

Oform.submit()

}

苹果树下也有类似功能不过,功能要比你所说的强大的多...

资料搜集于百度知道!

一.工具

windows自带的画图软件:mspaint.exe

windows自带的截图软件:SnippingTool.exe

二,方法(一):

使用快捷键PrtSc、Alt+PrtSc

1.敲击键盘上的”PrtSc“键可以实现截取全屏的功能,截取的屏幕图片将被保存到剪贴板中。可以在word文档、QQ等窗口通过"Ctrl+v"将其粘贴出来使用。

.2当只要截取窗口时,只需要按键盘上的Alt+PrtSc键,系统自动会截取当前最前面的窗口到剪贴板中,也可以在word文档、QQ等窗口通过"Ctrl+v"将其粘贴出来。

3.如果要将截取的屏幕和窗口单独作为一个图片文件保存,可以粘贴到word文档后对图片点击右键,选择“另存为图片”后保存到桌面即可。4.另外一个将截屏保存为图片文件的方法是使用windows自带的画图软件。打开软件后点击”粘贴“,截屏就从剪贴板粘贴到画图软件中。刚被粘贴上去的图片边缘有一圈蚂蚁线,代表图片此时被选中,点击裁剪后图片周围的白色背景就被去掉了,此时将图片保存到自己指定的路径即可。

方法(二):

使用windows自带的截图工具,完整的win7系统有自己自带的截图软件SnippingTool.exe,软件小巧且功能强大。可以从”C:\Windows\System32“将之找出来,将快捷方式发送到桌面方便以后使用。部分ghost系统有可能将这个软件精简掉了,对此可以在网上下载一个来使用。打开软件后,点击”新建“拖动鼠标选择要截图的区域,截图成功后保存即可。