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

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

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

相关推荐
douyiqing1 小时前
小程序内表格合并功能实现—行合并
小程序
wocwin3 小时前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
码递夫3 小时前
[NO-WX179]基于springboot+微信小程序的在线选课系统
java·spring boot·后端·微信小程序
小鱼快跑5 小时前
微信小程序知识点
微信小程序
雯0609~10 小时前
微信小程序:数据拼接方法
微信小程序·小程序
QC班长11 小时前
微信小程序引入TDesign组件后报错一直提示路径不对(Component is not found in path)的解决方法
微信小程序·小程序·tdesign·引入tdesign组件后报错
活宝小娜11 小时前
在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS
vue.js·typescript·scss
前端娱乐圈14 小时前
小程序语音识别功能 wx.createInnerAudioContext
人工智能·小程序·语音识别
Kx…………15 小时前
Uni-app入门到精通:subPackages节点为小程序的分包加载配置
前端·学习·小程序·uni-app
我血条子呢1 天前
[微信小程序]对接sse接口
微信小程序·小程序