canvas生成遮罩图片

/**
     * 生成canvas遮罩（由于在安卓手机上的兼容问题，未使用，采用服务端接口产生）
     * @param imgList
     */
    utils.canvasMasking = function(imgList) {
        var _imgAddMask = function(img) {
            var deferred = $.Deferred();
            var newImg = document.createElement(‘img‘);

            newImg.setAttribute(‘crossOrigin‘, ‘Anonymous‘); //解决跨域问题
            newImg.src = img.src;

            //源图片加载失败
            newImg.onerror = function() {
                deferred.reject(‘源图片加载失败‘);
            };

            //源图片加载成功
            newImg.onload = function() {
                var imageWidth = img.width;
                var imageHeight = img.height;
                var mask = document.createElement(‘img‘);

                mask.setAttribute(‘crossOrigin‘, ‘Anonymous‘);
                mask.src = img.getAttribute(‘data-mask‘);

                //遮罩图片加载失败
                mask.onerror = function() {
                    deferred.reject(‘遮罩图片加载失败‘);
                };

                //遮罩图片加载成功
                mask.onload = function() {
                    var maskCanvas = document.createElement(‘canvas‘);
                    var maskContext = maskCanvas.getContext(‘2d‘);
                    var imageCanvas = document.createElement(‘canvas‘);
                    var imageContext = imageCanvas.getContext(‘2d‘);

                    var maskWidth = $(img).parents(‘.mask-wrapper‘).width();
                    var maskHeight = $(img).parents(‘.mask-wrapper‘).height();

                    maskCanvas.width  = maskWidth;
                    maskCanvas.height = maskHeight;

                    var _x = $(img).data(‘x‘) + ‘‘;
                    var _y = $(img).data(‘y‘) + ‘‘;
                    var x = Math.abs(_x.indexOf(‘%‘) > -1 ? imageWidth * parseFloat(_x)/100 : parseFloat(_x));
                    var y = Math.abs(_y.indexOf(‘%‘) > -1 ? imageHeight * parseFloat(_y)/100 : parseFloat(_y));
                    var scale = parseFloat($(img).data(‘scale‘));
                    var angle = parseFloat($(img).data(‘angle‘));

                    imageCanvas.width = imageWidth * scale;
                    imageCanvas.height = imageHeight * scale;

                    /**
                     * 处理原始图片旋转、缩放
                     */
                        //移动到图片中心点，与css中心点保持一致
                    imageContext.translate(imageCanvas.width/2, imageCanvas.height/2);
                    imageContext.scale(scale, scale);
                    imageContext.rotate(angle);
                    //恢复canvas中心点到做顶点
                    imageContext.translate(-imageCanvas.width/2, -imageCanvas.height/2);
                    imageContext.drawImage(img, 0, 0, imageCanvas.width, imageCanvas.height);

                    /**
                     * 合并mask与处理后的原始图
                     */
                    maskContext.drawImage(mask, 0, 0, maskWidth, maskHeight);
                    //将一个源（新的）图像绘制到目标（已有）的图像上
                    maskContext.globalCompositeOperation = ‘source-in‘;
                    maskContext.drawImage(imageCanvas, x, y, maskWidth, maskHeight, 0, 0, maskWidth, maskHeight);

                    img.src = maskCanvas.toDataURL();

                    $(‘body‘).prepend(imageCanvas, maskCanvas);

                    $(img).siblings(‘.mask‘).hide();
                    deferred.resolve(maskCanvas);
                };
            };

            return deferred.promise();
        };