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

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

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中的返回值就是截取后的图片临时地址

相关推荐
weixin_lynhgworld9 小时前
从闲置到珍宝:旧物回收小程序系统重塑物品价值
小程序·旧物回收
烛阴9 小时前
告别繁琐的类型注解:TypeScript 类型推断完全指南
前端·javascript·typescript
2501_9160074713 小时前
iOS App 上架实战 从内测到应用商店发布的全周期流程解析
android·ios·小程序·https·uni-app·iphone·webview
小小怪下士_---_19 小时前
uniapp开发微信小程序自定义导航栏
前端·vue.js·微信小程序·小程序·uni-app
濮水大叔19 小时前
这个Database Transaction功能多多,你用过吗?
typescript·node.js·nestjs
Ratten19 小时前
06.TypeScript 元组类型、枚举类型
typescript
CptW20 小时前
字节面试题:实现任务调度器(Scheduler)
面试·typescript
摸着石头过河的石头20 小时前
小程序调试全攻略:微信/支付宝避坑指南,小白也能一次通关
前端·微信小程序
Ratten20 小时前
04.TypeScript 函数类型
typescript