Canvas renders network images (rotation, grayscale, saturation operations) and saves them locally

1. Question: The images in the canvas rendering project can be saved locally, but the rendering of network images fails to save locally. Is there a cross-domain problem?

Solution: Add an attribute to the img tag to support cross-domain, img.crossOrigin='Anonymous'.

2. Question: How to save the canvas rendering image to the local?

Solution: A jQuery plugin that can export canvas images as images in multiple formats

3. Question: Canvas rotation problem?

$scope.canvasRotate = function () {
            var rotate =  $('#myCanvas').attr('rotate');
            cxt.save()//canvas context object save state
            var x = canvas.width/2;
            var y = canvas.height/2;
            cxt.clearRect(0,0,canvas.width,canvas.height)//Clear the canvas
            cxt.translate(x, y)//Set the rotation of the center point of the canvas
            console.log(rotate)
            if(rotate ==0){
                cxt.rotate(180 * Math.PI / 180)//Rotate 180 degrees
                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. Saturation problem

Solution: This is very similar to the grayscale implementation steps, as long as you find the saturation formula. The realization principle is: rgb to hsl, hsl to rgb.

  /**
     * Convert HSL color values ​​to RGB.
     * Conversion formula adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * h, s, and l are set between [0, 1]
     * Return r, g, and b between [0, 255]
     *
     * @param Number h hue
     * @param Number s saturation
     * @param Number l brightness
     * @return Array RGB color value value
     */
    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)];
    }
    /**
    * Convert RGB color values ​​to HSL.
    * Conversion formula referenced from http://en.wikipedia.org/wiki/HSL_color_space.
        * r, g, and b need to be in the range [0, 255]
    * Return h, s, and l between [0, 1]
    *
    * @param Number r red color value
    * @param Number g green color value
    * @param Number b blue color value
    * @return Array HSL array of values
    */
    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)];
    }

How to use it in 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]);//Convert canvas image one pixel into hsl
                var h = Math.round(hslarr[0])/100;//Hue, processed into data before 0-1
                var s = Math.round(hslarr[1])/100;//Saturation
                var l = Math.round(hslarr[2])/100;//Brightness
                if(s<=0.95){//Processing saturation, hue, and brightness are similar
                    s = s+0.05;
                }
                var rgbarr = hslToRgb(h,s,l);//Convert the processed hsl to rgb
                pixels.data[i] = rgbarr[0];
                pixels.data[i+1] = rgbarr[1];
                pixels.data[i+2] = rgbarr[2];
            }
            cxt.putImageData(pixels,0,0)//Re-render the image
        }