HTML5 canvas实现移动端上传头像拖拽裁剪效果
程序员文章站
2023-01-11 09:47:42
这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下... 16-03-14...
本示例使用html5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全：
下图为裁剪后的效果：
html部分：
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>上传头像</title>
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div id="imgcrop" style="width:200px;height:200px;border:1px solid #ccc;overflow:hidden;">
- <img src="img/test.jpg" alt="">
- </div>
- <input type="file" accept="image/*" />
- <button id="save">保存</button>
- <p>下面为剪切的图片:</p>
- <div id="imgshow"></div>
- </body>
- </html>
javascript部分：
javascript code复制内容到剪贴板
- 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 = 0,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 + "不是图片文件！");
- 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;
- });
- //确定目标图片的样式
- 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("<img src="+url+" />");;
- });
- //裁剪图片
- 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();
- }
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文：http://www.cnblogs.com/yifengblog/p/5265598.html
上一篇： 人参须功效作用有哪些