函数里面,你需要注意拖拽的边界条件,一个是方框不能拖到图片所在DOM外的边界;另外一个就是当你鼠标放在小方框所在的区域改变鼠标的样式。方框在拖动的过程中,我们不断重绘方框移动的区域(也就是不断的画上阴影),然后在新的位置调用clearRect函数,重新擦出一个小方框出来。在拖拽或是拉伸的过程中,我们会不断调用produceSmallPic函数,在右边的容器(每个容器都是一个canvas)里面不断根据容器大小重绘出所需的头像。代码如下:
function produceSmallPic(imageURL,left, top, width, height) { var img = new Image(); img.src = imageURL; var targetCtx = new Array(); var targetCanvas = null; img.onload = function() { portraitGroupsArr.forEach(function(item, index) { targetCanvas = document.getElementById(item.class); targetCtx.push(targetCanvas.getContext('2d')); targetCtx[index].clearRect(0,0, item.width, item.height); targetCtx[index].drawImage(img, left - clearCanvasObj.left, top - clearCanvasObj.top, width, height, 0, 0 , item.width, item.height); }) } }
我们说下这个函数的作用,这里我们要注意一个参数imageURL,这个URL是由图片所在的DOM转化来的。因为你要把DOM所在的区域变成一张图片,这样你才能在利用drawImage函数截取你所需要的区域。所以我们先利用html2canvas库函数讲图片所在的DOM转化为canvas,这张canvas的内容是包含你所要截取的图片的,然后把这张canvas转化为图片取得图片地址imageURL,代码如下:
html2canvas(document.getElementById('imgContainer'), { onrendered: function(canvas) { var imageURL = canvasTransToImage(canavs); ... } }) function canvasTransToImage(canvas) { var imageURL = canvas.toDataURL('image/png'); return imageURL; }
接着,你就可以便利右侧的canvas容器,讲图片重回到里面了,整个过程就这样结束,回头看来是不是很简单。
相关依赖: