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

 

 实现效果：

 

 

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