canvas渲染网络图片(旋转，灰阶，饱和度操作)并保存到本地

1.问题：canvas渲染项目中的图片，可以保存到本地，但是渲染网络图片，保存本地失败，存在跨域问题？

解决方法：在给img标签添加一个属性，支持跨域，img.crossOrigin='Anonymous'。

2.问题：canvas渲染图片怎么保存到本地呢？

解决方法：可将canvas图像导出为多种格式图片的jQuery插件

3.问题：canvas旋转问题？

 $scope.canvasRotate = function () {
            var rotate =  $('#myCanvas').attr('rotate');
            cxt.save()//canvas上下文对象保存状态
            var x = canvas.width/2;
            var y = canvas.height/2;
            cxt.clearRect(0,0,canvas.width,canvas.height)//清空画布
            cxt.translate(x, y)//设置画布中心点旋转
            console.log(rotate)
            if(rotate ==0){
                cxt.rotate(180 * Math.PI / 180)//旋转180度
                cxt.translate(-x,-y)
                cxt.drawImage(img,0,0);
                var rotate =  $('#myCanvas').attr('rotate','1');
            }else{
                cxt.rotate(360 * Math.PI / 180)
                cxt.translate(-x,-y)
                cxt.drawImage(img,0,0);
                var rotate =  $('#myCanvas').attr('rotate','0');
            }
            cxt.restore()
        }

4.饱和度问题

解决方法：这个跟灰阶实现步骤很像，只要找到饱和度公式就可以了。实现原理就是：rgb转换hsl，hsl转rgb。

  /**
     * HSL颜色值转换为RGB.
     * 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space.
     * h, s, 和 l 设定在 [0, 1] 之间
     * 返回的 r, g, 和 b 在 [0, 255]之间
     *
     * @param   Number  h       色相
     * @param   Number  s       饱和度
     * @param   Number  l       亮度
     * @return  Array           RGB色值数值
     */
    function hslToRgb(h, s, l){
        var r, g, b;

        if(s == 0){
            r = g = b = l; // achromatic
        }else{
            var hue2rgb = function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }
    /**
    * RGB 颜色值转换为 HSL.
    * 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space.
        * r, g, 和 b 需要在 [0, 255] 范围内
    * 返回的 h, s, 和 l 在 [0, 1] 之间
    *
    * @param   Number  r       红色色值
    * @param   Number  g       绿色色值
    * @param   Number  b       蓝色色值
    * @return  Array           HSL各值数组
    */
    function rgbToHsl(r, g, b){
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;

        if(max == min){
            h = s = 0; // achromatic
        }else{
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max){
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [Math.floor(h*100), Math.round(s*100), Math.round(l*100)];
    }

canvas中怎么使用？

  if(img.complete){
            var pixels =  cxt.getImageData(0,0,img.width,img.height);
            var pixeldata = pixels.data;
            for(var i=0,len = pixeldata.length;i<len;i+=4){
                var hslarr = rgbToHsl( pixels.data[i], pixels.data[i+1], pixels.data[i+2]);//将canvas图像一个像素转成hsl
                var h = Math.round(hslarr[0])/100;//色调，处理成0-1之前数据
                var s = Math.round(hslarr[1])/100;//饱和度
                var l = Math.round(hslarr[2])/100;//亮度
                if(s<=0.95){//处理饱和度，色调，亮度类似
                    s = s+0.05;
                }
                var rgbarr = hslToRgb(h,s,l);//把处理后的hsl转成rgb
                pixels.data[i] = rgbarr[0];
                pixels.data[i+1] = rgbarr[1];
                pixels.data[i+2] = rgbarr[2];
            }
            cxt.putImageData(pixels,0,0)//重新渲染图像
        }