js 变量作用域

[everccnight]

封装了一个函数 ，希望其内部变量提取到外部来 该如何 处理

var picTouse = function(){
    
    function gray() {
        console.log(picTouse.id);
        $(".model").css("display", "flex");
        var id = $(".active")[0].id,
            canvas = $("#canvas"+id)[0],
            ctx = canvas.getContext('2d'),
            width = canvas.width,
            height = canvas.height,
            src = canvas.toDataURL("image/png"),
            imgs,
            img = new Image();
        img.src = src;
        imgs = img;
        imgs.onload = function () {  //图片要等其加载完成之后才能成在canvas中使用
            ctx.drawImage(imgs, 0, 0,width,height);
            var pixels = ctx.getImageData(0,0,width,height);
            var pixeldata = pixels.data;
            for(var i=0,len = pixeldata.length ;i<len;i+=4){
                var gray =parseInt( pixels.data[i]*0.3 + pixels.data[i+1] *0.59 + pixels.data[i+2]*0.11);
                pixels.data[i] = gray;
                pixels.data[i+1] = gray;
                pixels.data[i+2] = gray;
            }
            grays++;
            ctx.putImageData(pixels, 0, 0);
            $(".model").css("display", "none");
        };
    }
    /*浮雕按钮*/
    function emboss() {
        $(".model").css("display", "flex");
        var id = $(".active")[0].id,
            canvas = $("#canvas"+id)[0],
            ctx = canvas.getContext('2d'),
            width = canvas.width,
            height = canvas.height,
            src = canvas.toDataURL("image/png"),
            imgs,
            img = new Image();
        img.src = src;
        imgs = img;
        imgs.onload = function () {  //图片要等其加载完成之后才能成在canvas中使用
            ctx.drawImage(imgs, 0, 0,width,height);
            var pixels = ctx.getImageData(0,0,width,height);
            var lastR= pixels.data[0],lastG= pixels.data[1],lastB= pixels.data[2];
            for (var i=1;i<canvas.width-1;i++){
                for (var j=1;j<canvas.height-1;j++){
                    var currentPixel = 4*canvas.width*j + 4* i;
                    var r = pixels.data[currentPixel],
                        g = pixels.data[currentPixel+1],
                        b = pixels.data[currentPixel+2];
                    pixels.data[currentPixel] +=(128-lastR);
                    pixels.data[currentPixel+1] +=(128-lastG);
                    pixels.data[currentPixel+2] +=(128-lastB);
                    lastR = r;
                    lastG = g;
                    lastB = b;
                }
            }
            embosss++;
            ctx.putImageData(pixels, 0, 0);
            $(".model").css("display", "none");
        };
    }
    return{
      
        gray:gray,
        emboss:emboss,
       
    }


}()

希望把 var id = $(".active")[0].id,
canvas = $("#canvas"+id)[0],
ctx = canvas.getContext('2d'),
width = canvas.width,
height = canvas.height,
src = canvas.toDataURL("image/png"),
imgs,
img = new Image();
img.src = src;
imgs = img; 这一部分 提取出来 变成共有的 该如何提取

[_林小夕]

声明全局变量，在函数内给全局变量赋值，然后使用全局变量

[仰望星空的代码]

要全局使用当然要全局变量，或者利用闭包

[everccnight]

引用 2 楼 wangzl1163 的回复:

要全局使用当然要全局变量，或者利用闭包

全局变量会污染环境 我想问下 我这种写法怎么用闭包完成

[囧]

var picTouse = function(){
    var id, canvas....;

	function init(){
		id = $(".active")[0].id;
		canvas = ...;
	}

    function gray() {
		init();
        ...
	}
	function emboss() {
		init();
		...
	}
}();