当前位置: 首页 > article >正文

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

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

//将用户图片自动剪切成正方形
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中的返回值就是截取后的图片临时地址


http://www.kler.cn/a/557950.html

相关文章:

  • C++ MFC添加RichEditControl控件后,程序启动失败
  • windows环境下用docker搭建php开发环境dnmp
  • 【Bluedroid】AVRCP 连接源码分析(一)
  • Nginx web服务器+uWSGI web服务器+Django生产环境部署
  • OpenCV卡尔曼滤波器使用详细教程
  • HarmonyOS 应用下载网络文件保存到本地公共目录
  • 计算机毕业设计hadoop+spark旅游景点推荐 旅游推荐系统 旅游可视化 旅游爬虫 景区客流量预测 旅游大数据 大数据毕业设计
  • 基于Python+Vue开发的反诈视频宣传管理系统源代码
  • [数据结构]栈详解
  • Java集合框架全解析:从LinkedHashMap到TreeMap与HashSet面试题实战
  • ai-financial-agent - 为金融投资打造的AI代理
  • 【无标题】云原生作业六
  • IDEA使用git不提示账号密码登录,而是输入token问题解决
  • 简识Spring创建Bean方式和设计模式
  • 嵌入式LINUX驱动开发(三)-设备树驱动led
  • 红队内网攻防渗透:内网渗透之内网对抗:实战项目VPC1打靶PHP-RCE三层代理路由防火墙上线密码喷射域控提权
  • 快速熟悉商城源码的架构、业务逻辑和技术框架
  • Oracle 连接报错:“ORA-12541:TNS:no listener ”,服务组件中找不到监听服务
  • 期权帮|场外个股期权杠杆与风险分析
  • 电脑开机一段时间就断网,只有重启才能恢复网络(就算插网线都不行),本篇文章直接解决,不要再看别人的垃圾方法啦