canvas教程

使用jquery的imagecropper插件做用户头像上传 兼容移动端(2)

字号+ 作者:H5之家 来源:H5之家 2015-11-10 09:00 我要评论( )

大尺寸图片,180x180像素 中尺寸图片 100x100像素 小尺寸图片 50x50像素 最后是js部分了 var cropper; function init() { //绑定 cropper = new ImageCropper(300, 300, 180, 180); cropper.setCanvas("cropper");

 
             
             
             
 
             
           

 
                 
                大尺寸图片,180x180像素 
 
                 
                中尺寸图片 100x100像素 
 
                 
                小尺寸图片 50x50像素 
           

 
       

 
 
   

 
 

最后是js部分了

var cropper; 
 
function init() 
{    
    //绑定 
    cropper = new ImageCropper(300, 300, 180, 180); 
    cropper.setCanvas("cropper"); 
    cropper.addPreview("preview180"); 
    cropper.addPreview("preview100"); 
    cropper.addPreview("preview50"); 
    //检测用户浏览器是否支持imagecropper插件 
    if(!cropper.isAvaiable()) 
    { 
        alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it."); 
    } 

 
//打开本地图片 
function selectImage(fileList) 

    cropper.loadImage(fileList[0]); 

 
//旋转图片 
function rotateImage(e) 

    switch(e.target.id) 
    { 
        case "rotateLeftBtn": 
            cropper.rotate(-90); 
            break; 
        case "rotateRightBtn": 
            cropper.rotate(90); 
            break; 
    } 

 
//上传图片 
function saveImage() 

    //选个你需要的大小 
    var imgData = cropper.getCroppedImageData(180, 180); 
    console.log("上传了:"+imgData); 
    //在这里写你的上传代码 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • msdn 我告诉你【msdn.hk】

    msdn 我告诉你【msdn.hk】

    2017-04-24 14:00

  • npm install canvas简明指南

    npm install canvas简明指南

    2017-04-23 18:02

  • 使用canvas实现擦除效果

    使用canvas实现擦除效果

    2017-04-23 18:00

  • 前端小项目:使用canvas绘画哆啦A梦

    前端小项目:使用canvas绘画哆啦A梦

    2017-04-23 14:02

网友点评
w