微信小程序中将图片截图为正方形(自动居中)

没啥可说的,直接看代码吧(邪恶的微信小程序和浏览器的还不一样)

TypeScript 复制代码
//将用户图片自动剪切成正方形
const cutImgToSquare = (imgPath: string) => {
    //@ts-ignore
    wx.createSelectorQuery()
        .select('#canvas')
        .fields({ node: true, size: true })
        .exec((res: any) => {
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            const image = canvas.createImage()
            image.onload = () => {
                const size = Math.min(image.width, image.height)
                canvas.width = size
                canvas.height = size
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.drawImage(image, (image.width - size) / 2, (image.height - size) / 2, size, size, 0, 0, size, size)
                //@ts-ignore
                wx.canvasToTempFilePath({
                    canvas,
                    success: (res: any) => {
                        console.log("调用成功", res)
                    },
                    fail: (err: any) => {
                        console.log("调用失败", err)
                        loading.value = false
                        uni.showToast({
                            title: '图片上传失败!',
                            icon: 'error'
                        })
                    },
                    complete: (res: any) => {
                        console.log("调用完成", res)
                    }
                })
            }
            image.src = imgPath
        })
}

这里在wx.canvasToTempFilePath中的success中的返回值就是截取后的图片临时地址

相关推荐
土土哥V_araolin12 小时前
双迹美业模式系统开发(现成源码)
小程序·个人开发·零售
2501_9339072119 小时前
南京本凡科技,怎么选择专业小程序开发才能提升品牌竞争力?
科技·微信小程序·小程序
心无旁骛~20 小时前
【Claude Code开发】AI记账助手(miaozhang)微信小程序开发与部署完整指南
人工智能·微信小程序·notepad++
MIka21 小时前
CopilotKit 入门:用 Runtime 和 React Core 搭建真正可用的 AI Copilot
人工智能·typescript·agent
学以智用21 小时前
# TypeScript 高级特性(核心+实用)
前端·javascript·typescript
学以智用21 小时前
TypeScript 核心基础:类型/变量 + 函数 + 接口
前端·javascript·typescript
蕨类植物21 小时前
Fastify 模块化项目实战(二) — 初始化Fastify 项目
typescript
蕨类植物21 小时前
Fastify 模块化项目实战 - 你真的懂 tsconfig.json 吗?
typescript
We་ct1 天前
LeetCode 74. 搜索二维矩阵:两种高效解题思路
前端·算法·leetcode·矩阵·typescript·二分查找
回到原点的码农1 天前
TypeScript 与后端开发Node.js
javascript·typescript·node.js