lookcommon_course/pages_tool/pages/christmasHat/combine/combine.vue

<template>
    <view>
        <canvas canvasId="myCanvas" class="myCanvas" style="height: 300px; width: 100%"></canvas>
        <button @tap="savePic" class="cbtn">保存至相册</button>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {};
    },
    onLoad: function (t) {
        var that = this;
        uni.getImageInfo({
            src: app.globalData.bgPic,
            success: function (a) {
                that.bgPic = a.path;
                that.draw();
            }
        });
    },
    onReady: function () {},
    methods: {
        draw: function () {
            var t = app.globalData.scale;
            var e = app.globalData.rotate;
            var n = app.globalData.hat_center_x;
            var c = app.globalData.hat_center_y;
            var hatSrc = app.globalData.currentHatSrc;
            var s = uni.createCanvasContext('myCanvas');
            var i = uni.getSystemInfoSync().windowWidth;
            var g = 100 * t;
            s.clearRect(0, 0, i, 300);
            s.drawImage(this.bgPic, i / 2 - 150, 0, 300, 300);
            s.translate(n, c);
            s.rotate((e * Math.PI) / 180);
            s.drawImage(hatSrc, -g / 2, -g / 2, g, g);
            s.draw();
        },

        savePic: function () {
            var a = uni.getSystemInfoSync().windowWidth;
            uni.canvasToTempFilePath({
                x: a / 2 - 150,
                y: 0,
                height: 300,
                width: 300,
                canvasId: 'myCanvas',
                success: function (a) {
                    uni.saveImageToPhotosAlbum({
                        filePath: a.tempFilePath,
                        success: function (a) {
                            uni.navigateBack({
                                delta: 2
                            });
                        },
                        fail: function (a) {}
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './combine.css';
</style>