mv中无法使用Proxy(代理)和canvas合成图片下载问题（已解决） - Project1

function soul () {};
 
soul.prototype.create = function (target) {
    window[target.name+'s'] = new Proxy (target, this.action);
};
 
soul.prototype.action =  {
    set: function (target, prop, value) {
        if (target[prop] !== value) {
            console.log(target.name+'：',prop,target[prop],'=>',value);
            target[prop] = value;
        }
    }
};
 
soul = new soul ();
 
var obj={
    name:'obj', arr:[1,2,3,4,5], mo:'456', xx:{y:12}, fn:function(){delete window[this.name+'s']}
}
 
soul.create(obj);

function soul () {};


 


soul.prototype.create = function (target) {


    window[target.name+'s'] = new Proxy (target, this.action);


};


 


soul.prototype.action =  {


    set: function (target, prop, value) {


        if (target[prop] !== value) {


            console.log(target.name+'：',prop,target[prop],'=>',value);


            target[prop] = value;


        }


    }


};


 


soul = new soul ();


 


var obj={


    name:'obj', arr:[1,2,3,4,5], mo:'456', xx:{y:12}, fn:function(){delete window[this.name+'s']}


}


 


soul.create(obj);

function CanvasDemo () {};
 
CanvasDemo.Create = function () {
    var z = '<div>\
    <p  onclick="CanvasDemo.getimg()">导出图片到div元素</p><img id="outimg" src="">\
    <p>myCanvas中的合成图内容----</p><a id="downloadPic">点击下载合成图</a>\
    <canvas id="myCanvas" width="200" height="auto" style="border:1px solid #d3d3d3;">\
    </div>'
    $('#StandingDiv').append(z);
    var c=document.getElementById("myCanvas");    
    var ctx=c.getContext("2d");
 
    var min = 7,max=12;
    this.num = max-min+1;
    for (var i=min;i<=max;i++) {        
        this.img(ctx,'cjng',i);
    }
    console.log(c.width);
    this.WH_Re (c,min,max);
    setTimeout(function(){
        this.downLoad(c,'下载测试img');
        //this.getimg();
    }.bind(this),30);  
};
 
CanvasDemo.WH_Re = function (canvas) {    
    canvas.width  = 50*this.num;
    canvas.height = 50;
};
 
CanvasDemo.img = function (ctx,str,i) {
    var s = i+'';
    var num = s.length==1 ? '0'+i : i;
    var img = new Image();            
    img.src = FT_url.itemic (str+num);  
    img.onload = function() {
        ctx.drawImage(img,(i-7)*50,0);
    };    
};
 
CanvasDemo.getimg = function(canvas) {// 单击“生成图片”按钮，导出图片
    var c=document.getElementById("myCanvas");
    var newImg = document.getElementById("outimg")    
    var imgSrc = c.toDataURL('image/png'); //获取图片的DataURL        
    newImg.src = imgSrc; //将图片路径赋值给src    
    console.log('导出图片')
}
 
CanvasDemo.downLoad = function(canvas,name) {
    document.getElementById('downloadPic').addEventListener('click', function() {
        downloadCanvas(this, 'myCanvas', 'test.png');//下载myCanvas中的图像，命名为‘test.png’
    }, false);
}
 
function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
    console.log('下载图片');
}

function CanvasDemo () {};


 


CanvasDemo.Create = function () {


    var z = '<div>\


    <p  onclick="CanvasDemo.getimg()">导出图片到div元素</p><img id="outimg" src="">\


    <p>myCanvas中的合成图内容----</p><a id="downloadPic">点击下载合成图</a>\


    <canvas id="myCanvas" width="200" height="auto" style="border:1px solid #d3d3d3;">\


    </div>'


    $('#StandingDiv').append(z);


    var c=document.getElementById("myCanvas");    


    var ctx=c.getContext("2d");


 


    var min = 7,max=12;


    this.num = max-min+1;


    for (var i=min;i<=max;i++) {        


        this.img(ctx,'cjng',i);


    }


    console.log(c.width);


    this.WH_Re (c,min,max);


    setTimeout(function(){


        this.downLoad(c,'下载测试img');


        //this.getimg();


    }.bind(this),30);  


};


 


CanvasDemo.WH_Re = function (canvas) {    


    canvas.width  = 50*this.num;


    canvas.height = 50;


};


 


CanvasDemo.img = function (ctx,str,i) {


    var s = i+'';


    var num = s.length==1 ? '0'+i : i;


    var img = new Image();            


    img.src = FT_url.itemic (str+num);  


    img.onload = function() {


        ctx.drawImage(img,(i-7)*50,0);


    };    


};


 


CanvasDemo.getimg = function(canvas) {// 单击“生成图片”按钮，导出图片


    var c=document.getElementById("myCanvas");


    var newImg = document.getElementById("outimg")    


    var imgSrc = c.toDataURL('image/png'); //获取图片的DataURL        


    newImg.src = imgSrc; //将图片路径赋值给src    


    console.log('导出图片')


}


 


CanvasDemo.downLoad = function(canvas,name) {


    document.getElementById('downloadPic').addEventListener('click', function() {


        downloadCanvas(this, 'myCanvas', 'test.png');//下载myCanvas中的图像，命名为‘test.png’


    }, false);


}


 


function downloadCanvas(link, canvasId, filename) {


    link.href = document.getElementById(canvasId).toDataURL();


    link.download = filename;


    console.log('下载图片');


}