Html5移动端上传图片并裁剪 - Clipic.js

JavaScript018

Html5移动端上传图片并裁剪 - Clipic.js,第1张

Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸,用原生js开发的,轻量级,包含html跟css,不到8kb。点此链接体验: https://teojs.github.io/clipic/

https://github.com/teojs/clipic

参数说明

width:Number (默认:500) – 裁剪宽度

height:Number (默认:500) – 裁剪高度

ratio:Number (可选) – 裁剪的比例,当传入ratio时width/height将无效

src:String (必传) – 需要裁剪的图片,可以是图片链接,或者 base64

type:String (默认:jpeg) – 裁剪后图片的类型,仅支持 jpeg/png 两种

quality:Number (默认:0.9) – 压缩质量

buttonText:Array (默认:[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

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()

}

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

资料搜集于百度知道!

如果需要固定裁剪框的大小可以在cropper初始化的时候设置aspectRatio参数的值。

<script>

var cropper = new Cropper('画布id',{

aspectRatio:16/9,

})

</script>

格式:宽/高。如16/9代表将宽设置为16,高设置为9。