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

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

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

相关推荐
说私域1 小时前
数字文明时代开源技术驱动的商业范式重构:基于开源AI大模型、AI智能名片与S2B2C商城小程序源码的协同创新研究
人工智能·小程序·重构·开源·零售
一 乐11 小时前
宿舍报修|宿舍报修小程序|基于Java微信小程序的宿舍报修系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·宿舍报修小程序
青茶36016 小时前
uniapp开发微信小程序时如何进行分包(新手图文)
微信小程序·小程序·uni-app
itstrue18 小时前
同城跑腿小程序帮取帮送接单抢单预约取件智能派单同城配送全开源运营版源码优创
小程序·跑腿小程序
一匹电信狗1 天前
【Linux我做主】进度条小程序深度解析
linux·运维·服务器·c++·ubuntu·小程序·unix
说私域1 天前
基于开源AI大模型AI智能名片S2B2C商城小程序源码的私域流量稳定性构建研究
人工智能·小程序·开源·零售
高木的小天才2 天前
HarmonyOS ArkUI安全控件开发指南:粘贴、保存与位置控件的实现与隐私保护实践
安全·ui·华为·typescript·harmonyos
万维易源2 天前
OCR身份证识别(正反面)_个人证照OCR识别_开放API接口使用指南
人工智能·小程序·数据分析·ocr
Lonely丶墨轩2 天前
微信小程序
微信小程序