图片裁切过程解析
最近在工作中遇到了一个须要裁剪图片，并将裁剪后图片上传的需要。想着趁这个机会好好梳理下整个图片裁切的过程。
整个裁切次要分两个步骤，一是将裁切的图片用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 id="canvas" width="5" height="5"></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 filefile = 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 );