【金沙js333娱乐场】HTML5 canvas实现移动端上传头像拖拽裁剪效果,html5canvas

HTML5 canvas实现移动端上传头像拖拽裁剪效果,html5canvas

本示例使用HTML5
canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪,
虽然样式不好看,但是功能还算全:

下图为裁剪后的效果:

金沙js333娱乐场 1

html部分:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  
  2. <html lang=”en”>  
  3. <head>  
  4.     <meta charset=”UTF-8″>  
  5.     <title>上传头像</title>  
  6.     <meta name=”renderer” content=”webkit”>  
  7.     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  
  8. </head>  
  9. <body>  
  10. <div id=”imgCrop” style=”width:200px;height:200px;border:1px solid #ccc;overflow:hidden;”>  
  11.     <img src=”img/test.jpg” alt=””>  
  12. </div>  
  13. <input type=”file” accept=”image/*” />  
  14. <button id=”save”>保存</button>  
  15. <p>下面为剪切的图片:</p>  
  16. <div id=”imgShow”></div>  
  17. </body>  
  18. </html>  

JavaScript部分:

JavaScript Code复制内容到剪贴板

  1. var $imgCrop = $(“#imgCrop”);   
  2. var $img = $imgCrop.find(“img”);   
  3. var img = $img[0];   
  4. var width = parseInt($imgCrop.css(“width”));   
  5. var height = parseInt($imgCrop.css(“height”));   
  6. var startX,startY,scale = 1;   
  7. var x = 0,y = 0;   
  8. $(“input”).on(“change”,function(){   
  9.     var fr = new FileReader();   
  10.     var file = this.files[0]   
  11.     //console.log(file);   
  12.     if(!/image\/\w+/.test(file.type)){   
  13.         alert(file.name + “不是图片文件!”);   
  14.         return;   
  15.     }   
  16.     console.log(file);   
  17.     $img.removeAttr(“height width”);   
  18.     fr.readAsDataURL(file);   
  19.   
  20.     fr.onload = function(){   
  21.         img.src = fr.result;   
  22.         var widthInit = img.width;   
  23.         if(img.width>img.height){   
  24.             img.height = height;   
  25.             x = (width – img.width)/2;   
  26.             y = 0;   
  27.         }else{   
  28.             img.width = width;   
  29.             x = 0;   
  30.             y = (height – img.height)/2;   
  31.         }   
  32.         scale = widthInit/img.width;   
  33.         move($img, x, y);   
  34.            
  35.     };   
  36.        
  37. });   
  38.   
  39. img.addEventListener(“touchstart”,function(e){     
  40.     startX = e.targetTouches[0].pageX;   
  41.     startY = e.targetTouches[0].pageY;   
  42.     
  43.     return;     
  44.   
  45. });    
  46. img.addEventListener(“touchmove”,function(e){     
  47.     e.preventDefault();     
  48.     e.stopPropagation();     
  49.   
  50.     var changeX = e.changedTouches[0].pageX – startX + x;
      
  51.     var changeY = e.changedTouches[0].pageY – startY + y;
      
  52.   
  53.     move($(this), changeX, changeY);   
  54.     return;     
  55.      
  56. });    
  57. img.addEventListener(“touchend”,function(e){      
  58.    var changeX = e.changedTouches[0].pageX – startX + x;
      
  59.     var changeY = e.changedTouches[0].pageY – startY + y;
      
  60.   
  61.     x = x + e.changedTouches[0].pageX – startX;   
  62.     y = y + e.changedTouches[0].pageY – startY;   
  63.   
  64.     move($(this), changeX, changeY);   
  65.     return;     
  66.      
  67. });     
  68. //确定目标图片的样式   
  69. function move(ele, x, y){   
  70.     ele.css({   
  71.         ‘-webkit-transform’ : ‘translate3d(‘ + x + ‘px, ‘ + y + ‘px, 0)’,   
  72.         ‘transform’ : ‘translate3d(‘ + x + ‘px, ‘ + y + ‘px, 0)’  
  73.     });   
  74. }   
  75.   
  76. $(“#save”).on(“click”,function(){   
  77.     var url = imageData($img);   
  78.     console.log(url);   
  79.   
  80.     $(“#imgShow”).html(“<img src=”+url+” />”);;   
  81. });   
  82. //裁剪图片   
  83. function imageData($img) {   
  84.         var canvas = document.createElement(‘canvas’);   
  85.         var ctx = canvas.getContext(‘2d’);   
  86.         canvas.width = width ;   
  87.         canvas.height = height;   
  88.         ctx.drawImage(img, -x*scale, -y*scale, width*scale, height*scale, 0, 0, width, height);
      
  89.         return canvas.toDataURL();   
  90.     }   
  91.   

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:

canvas实现移动端上传头像拖拽裁剪效果,html5canvas 本示例使用HTML5
canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪,…

各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家分享一个经典游戏.大家都应该玩过微信中的打飞机吧.今天就简单的用canvas画布来制作一个简单的游戏画面. 

封装图片截取函数:


<pre>

/**

  • 视频屏幕截图
  • @param {object} file图片文件对象
  • @param {number} percentage 宽/高 百分比
  • @param {function} okCallback 点击“确定”回调
  • @param {function}cancelCallback 点击“取消”回调
    */
    openComfire: function(okCallback, cancelCallback, file,percentage)
    {
    var modalInstance = $uibModal.open({
    animation: false,
    templateUrl: ‘app/pages/common/modalTemplates/ImgCut.html’,
    controller: function($scope) {
    var image = new Image();
    image.src = window.URL.createObjectURL(file);
    var canvas, ctx, div_width, div_height, old_width, old_height,
    scale_x, scale_y;
    image.onload = function() {
    canvas = document.getElementById(“can”);
    $(“#can”).attr({
    width:750,
    height: 750/percentage
    })
    ctx = canvas.getContext(‘2d’);
    div_width = $(“#can”).width();
    div_height = $(“#can”).height()
    old_width = image.width;
    old_height = image.height;
    console.log(old_width/old_height)
    scale_x = div_height * old_width /
    old_height;//图片压缩以后的宽度
    scale_y = div_width * old_height /
    old_width;//图片压缩以后的高度
    if(old_width/old_height < percentage) { //长了
    ctx.drawImage(image, 0, 0, old_width, old_height, 0, 0,
    div_width, scale_y);
    } else { //长图
    ctx.drawImage(image, 0, 0, old_width, old_height,0, 0, scale_x,
    div_height);
    }
    }
    var x, y, relativeX, relativeY, mousemoveMark = 0;
    $(“body”).on(“mousedown”, “#can”, function(e) {
    e = event || window.event;
    e.preventDefault();
    x = e.pageX – $(this).offset().left;
    y = e.pageY – $(this).offset().top;
    mousemoveMark = 1;
    })
    $(“body”).on(“mousemove”, “#can”, function(e) {
    console.log(mousemoveMark)
    if(mousemoveMark) {
    e = event || window.event;
    e.preventDefault();
    relativeX = e.pageX – $(this).offset().left;
    relativeY = e.pageY – $(this).offset().top;
    changePosition(relativeX – x, relativeY – y)
    }
    })
    $(“body”).on(“mouseup”, “#can”, function(e) {
    e = event || window.event;
    e.preventDefault();
    mousemoveMark = 0
    })
    function changePosition(x, y) {
    ctx.clearRect(0, 0, div_width, div_height);
    if(old_width/old_height > percentage) {
    ctx.drawImage(image, 0, 0, old_width, old_height, x, y,
    div_width, scale_y);
    } else {
    ctx.drawImage(image, 0, 0, old_width, old_height, x, y, scale_x,
    div_height);
    }
    }
    },
    size: ‘lg’,
    });
    modalInstance.result.then(function() {
    console.log(‘click modal ok’);
    angular.isFunction(okCallback) && okCallback();
    }, function() {
    console.log(‘modal dismiss’);
    angular.isFunction(cancelCallback) && cancelCallback();
    });
    }

    </pre>

调用函数:


<pre>

imgCut.openComfire(
function() {
var base64Codes=$(“#can”)[0].toDataURL(“image/jpeg”);
/**
* @param base64Codes
* 图片的base64编码
/
var form=$(“#formBase64”);
var formData = new FormData(form);
//这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
//convertBase64UrlToBlob函数是将base64编码转换为Blob
formData.append(“imageName”,convertBase64UrlToBlob(base64Codes));
//append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
file=formData.get(“imageName”);//得到截图之后的file文件
/
*
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var
bytes=window.atob(urlData.split(‘,’)[1]);//去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
console.log(ia)
return new Blob( [ab] , {type : ‘image/png’});
}
}, function() {}, file,percentage
);

</pre>

首先画面布局

<canvas id = “canvas” width = “375” height =
“627”></canvas>

样式布局

*{

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

}

#canvas{

box-shadow: 0 0 50px gray;

display: block;

margin: 0 auto;

}

接下来呢,就是js原生代码方式去书写了,并且带上闭包方式进行书写.

发表评论

电子邮件地址不会被公开。 必填项已用*标注