随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

uni-app canvas 拖拽组件合成新图片保存本地(上传服务器)

1、组件:插件市场地址  https://ext.dcloud.net.cn/plugin?id=2059#rating

组件核心代码引入components目录

 

 

使用关键点:

1)main.js全局注册 setData 方法,后面调用组件方法时需要用到

复制代码
Vue.mixin({
    methods: {
        setData: function(obj, callback) {
            let that = this;
            const handleData = (tepData, tepKey, afterKey) => {
                tepKey = tepKey.split('.');
                tepKey.forEach(item => {
                    if (tepData[item] === null || tepData[item] === undefined) {
                        let reg = /^[0-9]+$/;
                        tepData[item] = reg.test(afterKey) ? [] : {};
                        tepData = tepData[item];
                    } else {
                        tepData = tepData[item];
                    }
                });
                return tepData;
            };
            const isFn = function(value) {
                return typeof value == 'function' || false;
            };
            Object.keys(obj).forEach(function(key) {
                let val = obj[key];
                key = key.replace(/\]/g, '').replace(/\[/g, '.');
                let front, after;
                let index_after = key.lastIndexOf('.');
                if (index_after != -1) {
                    after = key.slice(index_after + 1);
                    front = handleData(that, key.slice(0, index_after), after);
                } else {
                    after = key;
                    front = that;
                }
                if (front.$data && front.$data[after] === undefined) {
                    Object.defineProperty(front, after, {
                        get() {
                            return front.$data[after];
                        },
                        set(newValue) {
                            front.$data[after] = newValue;
                            that.$forceUpdate();
                        },
                        enumerable: true,
                        configurable: true
                    });
                    front[after] = val;
                } else {
                    that.$set(front, after, val);
                }
            });
            // this.$forceUpdate();
            isFn(callback) && this.$nextTick(callback);
        }
    }
});
复制代码

 

 

 

2)引入组件到页面

 

 

3)点击贴图是注册事件、设置贴图

 

 

 

4)点击模板替换底图,需要调用拖拽组件的方法 changeBgImage();

 

 实现效果:

 

 

使用该组件合成的图片几乎没有啥大问题,更重要的是图片很清晰,没有模糊的情况。很赞很赞了。

 

posted on   小虾米吖~  阅读(872)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库

点击右上角即可分享
微信分享提示