html canvas 遮罩蒙版,canvas生成遮罩图片

首先我们知道css3中增加了不少好用、好玩的css3样式可以使用。今天我们要说到是遮罩。

它的使用方式也不复杂，和background使用方式差不多。使用mask-image就可以使用，这样就可以通过图片合成一张带有形状的合成图了，不需要直接使用PS处理了。CSS遮罩——如何在CSS中使用遮罩，这篇文章已经详细说明了遮罩如何使用了，我这里就不赘述了。今天我这里想要说明的是，如何通过这个完成生成一个合成图片的逻辑。

它通过两种方式：前端JS+canvas，后端nodejs+canvas，完成基本思路是一样的，但是两种方式，后者的兼容性稍好一些。

基础的图片合成，整体的思路是：首先按照遮罩层的大小，生成一张图片；其次把原图片按照一定的规则按照遮罩层大小剪切(drawImage)一张图片然后合成到遮罩层上面；最后一个非常重要设置是：globalCompositeOperation，设置图片合成时，组合操作。

前端JS实现

utils.canvasMasking = function(img) {

var deferred = $.Deferred();

var newImg = document.createElement('img');

newImg.setAttribute('crossOrigin', 'Anonymous'); //解决跨域问题

newImg.src = img.src;

//源图片加载失败

newImg.onerror = function() {

deferred.re