图片裁切全过程解析

图片裁切过程解析

最近在工作中遇到了一个需要裁剪图片，并将裁剪后图片上传的需求。想着趁这个机会好好梳理下整个图片裁切的过程。

整个裁切主要分两个步骤，一是将裁切的图片用canvas画出，二是将canvas转换为file

1.将裁切的图片用canvas画出

// 创建canvas元素, image是Image对象, pixelCrop是裁切的位置(width, height)
function imageToCanvas(image, pixelCrop){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    
    var maxSize = Math.max(image.width, image.height);
    var safeArea = 2 * ((maxSize/2)* Math.sqrt(2));
    
    canvas.width = safeArea;
    canvas.height = safeArea;
    
    if(ctx !== null){
        ctx.translate(safeArea / 2, safeArea / 2);
        ctx.translate(-safeArea / 2, -safeArea / 2);
    }
    ctx.drawImage(image, safeArea / 2 - image.width*0.5, safeArea/2 - image.height*0.5);
    
    var data = ctx.getImageData(0, 0, safeArea, safeArea);
    
    canvas.width = pixelCrop.width;
    canvas.height = pixelCrop.height;
    
    ctx.putImageData(data, Math.round(0 - safeArea/2 + image.width*0.5 - pixelCrop.x), Math.round(0 - safeArea/2 + image.height*0.5 - pixelCrop.y));
}

2.将canvas转化为file(png,jpeg,jpg)

创建一个canvas

将canvas转换为file（指定JPEG格式)

给DOM创建一个新的img元素，源图即为canvas转换的file

var canvas = document.getElementById("canvas");

canvas.toBlog(function(blob){
    var newImg = document.createElement("img");
    var url = URL.createObjectURL(blob);
    
    newImg.onload = function(){
        // no longer need to read the blob so it's revoked
        URL.revokeObjectURL(url);
    };
    
    newImg.src = url;
    document.body.appendChild(newImg);
},"image/jpeg")

常用API

// file to url 
objectURL = URL.createObjectURL(object) // object: File对象、Blob对象或者MediaSource对象

// blob to file
file = new File([myBlob], name, {type: "image/png"}) // A Blob() is almost a File()

// canvas操作

var ctx = canvas.getContext('2d');
ctx.drawImage(image, width, height);
var data = ctx.getImageData(0, 0, width, height);
ctx.putImageData(data, dx, dy );