函数里面，你需要注意拖拽的边界条件，一个是方框不能拖到图片所在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容器，讲图片重回到里面了，整个过程就这样结束，回头看来是不是很简单。

相关依赖：

复制代码

<script src="<a href="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script">https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script</a>>

写在最后：

canvas的操作，要多多注意那些边界条件，什么时候该重绘什么时候该清除，这些是比较重要的。逻辑清晰了，canvas本身的API也就那么几个，操作起来也就没那么麻烦了，最后，谢谢大家查阅，写的不是很清楚，有不懂的可以一起讨论~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Tag：Canvas   自定义头像  

相关文章

246天天好彩免费大全最新评论