Shulou(Shulou.com)06/01 Report--

This article will explain in detail how canvas implements the drag and cut effect of uploading avatars on mobile devices in HTML5. The editor finds it very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Html section:

Upload avatar

Save

The following is a cut picture:

JavaScript section:

JavaScript Code copies content to the clipboard

Var $imgCrop = $("# imgCrop")

Var $img = $imgCrop.find ("img")

Var img = $img [0]

Var width = parseInt ($imgCrop.css ("width"))

Var height = parseInt ($imgCrop.css ("height"))

Var startX,startY,scale = 1

Var x = 0BI y = 0

$("input") .on ("change", function () {

Var fr = new FileReader ()

Var file = this.files [0]

/ / console.log (file)

If (! / image///w+/.test (file.type)) {

Alert (file.name + "not a picture file!")

Return

}

Console.log (file)

$img.removeAttr ("height width")

Fr.readAsDataURL (file)

Fr.onload = function () {

Img.src = fr.result

Var widthInit = img.width

If (img.width > img.height) {

Img.height = height

X = (width-img.width) / 2

Y = 0

} else {

Img.width = width

X = 0

Y = (height-img.height) / 2

}

Scale = widthInit/img.width

Move ($img, x, y)

}

});

Img.addEventListener ("touchstart", function (e) {

StartX = e.targetTouches [0] .pageX

StartY = e.targetTouches [0] .pageY

Return

});

Img.addEventListener ("touchmove", function (e) {

E.preventDefault ()

E.stopPropagation ()

Var changeX = e.changedTouches [0] .pageX-startX + x

Var changeY = e.changedTouches [0] .pageY-startY + y

Move ($(this), changeX, changeY)

Return

});

Img.addEventListener ("touchend", function (e) {

Var changeX = e.changedTouches [0] .pageX-startX + x

Var changeY = e.changedTouches [0] .pageY-startY + y

X = x + e.changedTouches [0] .pageX-startX

Y = y + e.changedTouches [0] .pageY-startY

Move ($(this), changeX, changeY)

Return

});

/ / determine the style of the target picture

Function move (ele, x, y) {

Ele.css ({

'- webkit-transform':' translate3d ('+ x +'px,'+ y +'px, 0)'

'transform':' translate3d ('+ x +'px,'+ y +'px, 0)'

});

}

$("# save"). On ("click", function () {

Var url = imageData ($img)

Console.log (url)

("# imgShow") .html ("

")

});

/ / crop the picture

Function imageData ($img) {

Var canvas = document.createElement ('canvas')

Var ctx = canvas.getContext ('2d')

Canvas.width = width

Canvas.height = height

Ctx.drawImage (img,-x*scale,-y*scale, width*scale, height*scale, 0,0, width, height)

Return canvas.toDataURL ()

}

This is the end of the article on "how to achieve the drag and cut effect of uploading avatars on mobile in canvas in HTML5". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.