HTML5 本地裁剪图片

下面奉上我自己写的一个demo，代码写得比较少，很多细节不会处理。如果有不得当的地方恳请指教，谢谢啦 ^_^ ^_^

 

功能实现步奏：

 

一：获取文件，读取文件并生成url

 

二：根据容器的大小使用canvas绘制图片

 

三：使用canvas绘制遮罩层

 

四：使用canvas绘制裁剪后的图片

 

五：拖动裁剪框，重新裁剪图片

 

 

PS：因为是先把demo写好再写这篇文章的，所以分段贴的代码是直接从代码里面一段段拷的，要留意this对象喔

 

第一步：获取文件，读取文件并生成url：

在这里我是使用html5里面的file api处理本地文件上传的，因为这样可以不需要把图片上传到服务器，再由服务器返回图片地址来做预览，详细请看：使用File API 之FileReader实现文件上传

 

document.getElementById('post_file').onchange = function() {
    var fileList = this.files[0];
    var oFReader = new FileReader();
    oFReader.readAsDataURL(fileList);
    oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
        postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数
    };
}

 

　　

 

第二步：根据容器的大小使用canvas绘制图片：

在上一步使用File API的FileReader已经得到了需要上传图片的地址了，接下来需要使用canvas把这个图片绘制出来。这里为什么不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。

 

这里稍微要注意下canvas的drawImage方法。参考资料移步这里：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

 

 

paintImage: function(url) {
    var t = this;
    var createCanvas = t.getImage.getContext("2d");
    var img = new Image();
    img.src = url;
    img.onload = function(){

        //等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
        //如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
        //t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py：绘制后图片的Y轴
        if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
            t.imgWidth = img.width;
            t.imgHeight = img.height;

        } else {
            var pWidth = img.width / (img.height / t.regional.offsetHeight);
            var pHeight = img.height / (img.width / t.regional.offsetWidth);
            t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
            t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
        }
        //图片的坐标
        t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
        t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';
         
        t.getImage.height = t.imgHeight;
        t.getImage.width = t.imgWidth;
        t.getImage.style.left = t.px;
        t.getImage.style.top = t.py;

        createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
        t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
        t.cutImage();
        t.drag();
    };
},

 

　　

 

出来的效果是这样的：

 

 

 

 

 

 

 

 

 

第三步：使用canvas绘制遮罩层

在上一步中已经把需要裁剪的背景图绘制出来了，现在需要根据背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面，并且使用canvas的clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比。

 

（这里的遮罩层仅仅是用来做显示效果，并没有做裁剪图片的工作。不知道这一步能不能直接去掉？有知道的童鞋麻烦告诉下我。）

 

//绘制遮罩层：
t.editBox.height = t.imgHeight;
t.editBox.width = t.imgWidth;
t.editBox.style.display = 'block';
t.editBox.style.left = t.px;
t.editBox.style.top = t.py;

var cover = t.editBox.getContext("2d");
cover.fillStyle = "rgba(0, 0, 0, 0.5)";
cover.fillRect (0,0, t.imgWidth, t.imgHeight);
cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);
　

 

 

第四步：使用canvas绘制裁剪后的图片

在第三步里面，把遮罩层绘制好了，但是遮罩层并没有裁剪的能力，仅仅是用来显示裁剪区域与非裁剪区域的对比而已，所以这里就开始做裁剪图片的功能了。同样使用到canvas的drawImage方法。

 

 

//绘制剪切图片：
t.editPic.height = t.sHeight;
t.editPic.width = t.sWidth;
var ctx = t.editPic.getContext('2d');
var images = new Image();
images.src = t.imgUrl;
images.onload = function(){
    ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
    document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL(); //把裁剪后的图片使用img标签显示出来
}
　　

 

 

第五步：拖动裁剪框，重新裁剪图片

使用截图上传头像功能时我们希望能裁剪到满意的图片，所以裁剪框就需要不停的变动才得以裁剪出完美的图片。前几步已经把裁剪图片的基本功能做出来了，所以现在需要做的就是裁剪框跟进鼠标的移动来实时裁剪图片。

 

drag: function() {
    var t = this;
    var draging = false;
    var startX = 0;
    var startY = 0;

    document.getElementById('cover_box').onmousemove = function(e) {
        //获取鼠标到背景图片的距离
        var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
        var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
        //判断鼠标是否在裁剪区域里面：
        if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
            this.style.cursor = 'move';
             
            this.onmousedown = function(){
                draging = true;
                //记录上一次截图的坐标
                t.ex = t.sx;
                t.ey = t.sy;
                //记录鼠标按下时候的坐标
                startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
                startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
            }
            window.onmouseup = function() {
                draging = false;
            }
             
            if (draging) {
                //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)，裁剪区域不能超出遮罩层的区域;
                if ( t.ex + (pageX - startX) < 0 ) {
                    t.sx = 0;
                } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
                    t.sx = t.imgWidth - t.sWidth;
                } else {
                    t.sx = t.ex + (pageX - startX);
                };

                if (t.ey + (pageY - startY) < 0) {
                    t.sy = 0;
                } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
                    t.sy = t.imgHeight - t.sHeight;
                } else {
                    t.sy = t.ey + (pageY - startY);
                }

                t.cutImage();
            }
        } else{
            this.style.cursor = 'auto';
        }
    };
}