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

rexuegg123

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

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

问题一
先上代码：
[pre lang="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);[/pre]

以上代码是利用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吗？


问题二：
老规矩，先上代码
[pre lang="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('下载图片');
}[/pre]

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

mv上canvas操作

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

rexuegg123

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

喵呜喵5

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

或者升级nwjs的版本看看

zths

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

rexuegg123

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

好的，我试试，谢谢大神

rexuegg123

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

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

zths

打开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

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

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

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

rexuegg123

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

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