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

rexuegg123 · 发表于 2021-5-15 17:20:24

加入我们，或者，欢迎回来。

您需要登录才可以下载或查看，没有帐号？注册会员

x

本帖最后由 rexuegg123 于 2021-5-16 08:59 编辑

很久没来论坛了，向大神请教两个问题：
一、如何向MV中引入Proxy(代理)机制？
二、在mv中，利用canvas操作图片后（比如几张图片拼合在一起），如何下载canvas中的图像内容（下载保存为图片）？

问题已解决，感谢zths大神指导！解决办法：原来我用的1.5.1版的MV，改用1.6.1后两个问题“不药而愈”

问题一
先上代码：

JAVASCRIPT 代码复制

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);

以上代码是利用Proxy的代理机制为后面的 obj 对象新建一个镜像objs(也是一个对象，其属性与方法与obj一致)。建立镜像后，obj的任何操作都在objs上进行。而objs的任何属性变化都可以通过增加方法的方式来提供反馈，如上面的代码就提供了属性变化时的console.log()的提示功能。比如:

重新设定obj的name属性
objs.name='objs';
obj： name obj => objs //控制台提示的内容

以上是在浏览器中运行上述代码后的得到的结果gif

笔者的目利用Proxy的拦截反馈机制，建立游戏NPC的AI，也可以为其他角色通过监视自身属性的变化来建立自行行动的能力。但在mv中使用时，mv表示不认识Proxy：Uncaught ReferenceError: Proxy is not defined……
所以有大神知道在怎么在mv中引入Proxy吗？

问题二：
老规矩，先上代码

JAVASCRIPT 代码复制

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('下载图片');


}

依然先在浏览器上运行，canvas的操作在引用 ‘.toDataURL()’ 时，表现出了跨域问题……即无法引用canvas画布中的内容，无法导出、下载等……笔者无法解决这个问题

以上是在mv上操作canvas的gif
所以又在mv上，结果mv上可以导出画布中的图像内容到div元素中。在下载画布内容保存为图片时虽没有报错，但却没有任何反应。
到底是mv并没有重内存中下载画布的内容呢，还是下载了没有通知？

rexuegg123 · 发表于 2021-5-15 17:22:00

在网上查了不少资料……暂时无解，期望某大神降临指导

喵呜喵5 · 发表于 2021-5-15 19:48:07

前一个，搜索proxy的polyfill，能用上一些proxy基础的功能
https://gitee.com/ambit/es6-proxy-polyfill/

或者升级nwjs的版本看看

zths · 发表于 2021-5-15 21:26:53

升级nwjs肯定好使....
估计你那个mv带的是 nwjs0.12.0 的版本...
那个版本很坑人

rexuegg123 · 发表于 2021-5-15 21:31:18

zths 发表于 2021-5-15 21:26
升级nwjs肯定好使....
估计你那个mv带的是 nwjs0.12.0 的版本...
那个版本很坑人 ...

好的，我试试，谢谢大神

rexuegg123 · 发表于 2021-5-15 21:44:06

zths 发表于 2021-5-15 21:26
升级nwjs肯定好使....
估计你那个mv带的是 nwjs0.12.0 的版本...
那个版本很坑人 ...

网上找到最新的nwjs-v0.53.0-win-x64.zip……再问下，不知道MV中nwjs是怎么升级的？

zths · 发表于 2021-5-15 21:59:56

本帖最后由 zths 于 2021-5-15 22:02 编辑

打开mv目录默认是 ?:\Program Files (x86)\KADOKAWA\RPGMV
有几个目录 nwjs-lnx nwjs-win nwjs-win-test
分别对应 nwjs-NORMAL版本 nwjs-sdk版本 nwjs linux版本
下载的包覆一下然后 nw.exe 改名为 Game.exe linux的可能不用管.

注意下载的nwjs建议都用32bit的版本.. 不然32位跑不了.
还有 0.12.x 以上的nwjs不支持 windows xp. 这无法避免

rexuegg123 · 发表于 2021-5-15 22:26:54

zths 发表于 2021-5-15 21:59
打开mv目录默认是 ?:\Program Files (x86)\KADOKAWA\RPGMV
有几个目录 nwjs-lnx nwjs-win nwjs-win-test
...

我的MV版本1.5.1，尝试了以下：
1、将原来的nwjs-win里的文件全删除，将新版的全放进去，然后 nw.exe 改名为 Game.exe 。直接EXE窗口白屏报错
2、用新版nwjs覆盖原版文件，删除原版 Game.exe，然后 nw.exe 改名为 Game.exe。能开启EXE，但MV的一些功能用不起，F8调试功能也没有了
3、原版MV引入 es6-proxy-polyfill.js，proxy能用了，测试了set功能能用，但会报感叹号：Trap 'set' returned false for property 'name'，不知道什么意思

zths · 发表于 2021-5-15 23:18:31

本帖最后由 zths 于 2021-5-15 23:24 编辑

rexuegg123 发表于 2021-5-15 22:26
我的MV版本1.5.1，尝试了以下：
1、将原来的nwjs-win里的文件全删除，将新版的全放进去，然后 nw.exe 改 ...

不要按f8 按f12
白屏的原因可能是你删了 project.json

rexuegg123 · 发表于 2021-5-16 08:53:59

zths 发表于 2021-5-15 23:18
不要按f8 按f12
白屏的原因可能是你删了 project.json

把MV版本升级到1.6.1，什么都不用改，两个问题都搞定了。感谢你费心了！

帐号		自动登录	找回密码
密码			注册会员

[有事请教] mv中无法使用Proxy(代理)和canvas合成图片下载问题（已解决）

加入我们，或者，欢迎回来。

开拓者

短篇九导演组冠军