更新记录

1.0.0（2025-02-10）

发布九宫格切图功能

平台兼容性

MagicPicNineSquare 九宫格切图

组件名：magic-pic-nine-square

将一张图片等比例切成9张图片，常用在：朋友圈切宫格图、图片处理等。支持旋转，使用简单，全渠道通用。

九宫格切图组件

注意事项 （1）该组件不包括预览功能，组件生成图片后会直接返回图片地址，开发者可以拿图片自行开发预览功能。

（2）使用组件的时候，请锁死左右滑动，不然会出现白屏。【overflow-x: hidden;】

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<view>
    <magic-pic-nine-square ref="magicPicNineSquare"></magic-pic-nine-square>
</view>

使用方法

<view>
    <magic-pic-nine-square ref="magicPicNineSquare"></magic-pic-nine-square>
</view>

export default {
    data() {
        return {
      squareImg: null,
      mainPhoto: {
        width: null,
        height: null
      }
    };
    },
    methods: {
        // 从相册中选择图片
    choosePhotoImage() {
        this.$refs.magicPicNineSquare.choosePhotoImage().then((photo) => {
            // photo - 拿到获取的图片实例
            this.squareImg = photo.path;
            // TODO 自己的业务逻辑
            // ...

            // 生成图片逻辑
            this.takeImage();
        })
    },
    // 从微信聊天记录中选择图片 支持在微信小程序中使用
    chooseWeiXinImage() {
        this.$refs.magicPicNineSquare.chooseWeiXinImage().then((photo) => {
            // photo - 拿到获取的图片实例
            this.squareImg = photo.path;
            // TODO 自己的业务逻辑
            // ...

            // 生成图片逻辑
            this.takeImage();
        })
    },
    // 生成图片
    takeImage() {
        // this.squareImg - 图片地址
        // this.rotate - 旋转角度
        this.$refs.magicPicNineSquare.takeImage(this.squareImg, this.rotate).then(({ imgList, image }) => {
            // image 涉及旋转，旋转后新的图片尺寸，用户定义预览功能是多少的宽高
            // 这里给出在屏幕居中展示的情况下，宽高计算方式，其他的请自行编写
            if(image.width >= image.height) {
                this.mainPhoto.width = this.system.windowWidth;
                this.mainPhoto.height = image.height * this.mainPhoto.width / image.width;
            } else {
                this.mainPhoto.height = this.system.windowHeight;
                this.mainPhoto.width = image.width * this.mainPhoto.height / image.height;
            }
            // imgList - 生成的九宫格图片链接
        })
    },
    // 保存图片
    saveImageHandle() {
        this.$refs.magicPicNineSquare.saveImageHandle().then((data) => {
            console.log(data)
        })
    },
    }
};

API

Calendar Props

Calendar Events