微信小程序对上传的图片进行裁剪

2023-10-26

  1. 背景:

使用uniapp中uni.chooseImage的裁剪参数crop只能在App中生效,在微信小程序中不生效。

  1. 实现思路

  1. uni.chooseImage打开相册获取图片路径(uni.chooseImage(OBJECT) | uni-app官网 (dcloud.net.cn)

  1. 将获取到的图片路径传入wx.cropImage对图片进行裁剪(wx.cropImage(Object object) | 微信开放文档 (qq.com)

  1. 将裁减后的图片路径通过uni.uploadFile上传到服务器生成网络地址(uni.uploadFile(OBJECT) | uni-app官网 (dcloud.net.cn)

  1. 代码如下:

                // 1 打开相册获取图片路径
                uni.chooseImage({
                    count: 1, //默认选取1张图片
                    sourceType: ['album'], //从相册选择
                    success: function (res) {
                        // 2 对获取到的图片进行裁剪
                        wx.cropImage({
                          src: res.tempFilePaths[0], // 图片路径
                          cropScale: '1:1', // 裁剪比例
                          success:function(res){
                              // 3 将裁剪好的图片上传到服务器
                              uni.uploadFile({
                                  url: app.globalData.miniComent,//自己服务器的路径
                                  filePath: res.tempFilePath,//图片地址
                                  name: 'file',
                                  formData: {
                                      userCode:that.userCode
                                  },
                                  success: (res1) => {
                                      let url = JSON.parse(res1.data).data
                                      console.log(url,"裁剪成功后的图片网络地址");
                                      that.userInfo.headimgurl = url;//更新头像
                                  },
                                  complete: (res) => {
                                      console.log(res,"上传调用结束");
                                  }
                              });
                          },
                          complete: (res) => {
                              console.log(res,"裁剪调用结束");
                          }
                        })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序对上传的图片进行裁剪 的相关文章

  • 如何减少顶点图中折线图的线条粗细

    我在角度项目中使用 Apex 图表 我在那里实现了时间序列图表 但无法减少折线图中的 线条粗细 这是我的配置 public initChartData void this series this response data data thi
  • 如何将值从 javascript 传递到 php 文件

    我通过以下方式获取价值JQuery像这样的东西 var query popURL split var dim query 1 split var popWidth dim 0 split 1 Gets the first query str
  • 停止 jQuery 循环设置 display:none;

    我正在创建一个小游戏 用户从一组项目中进行选择 然后对所选项目进行洗牌并选择一个 我正在使用 jQuery 循环 http jquery malsup com cycle http jquery malsup com cycle 运行主动画
  • jQuery-UI 的自动完成显示效果不佳,z-index 问题

    我目前正在我的客户网上商店中实现 jQuery UI 的自动完成功能 问题是 自动完成所在的元素的 z 索引高于自动完成的 z 索引 我尝试手动设置自动完成 z index 但我感觉 jQuery UI 正在覆盖它 事实上我的问题是重复的自
  • Flex Slider 无法在手机上运行

    我在这个页面上使用 flexslider 的网站上工作 http www intensetomatoes co nz story timeline http www intensetomatoes co nz story timeline
  • 输入值返回 NaN

    如果有人可以帮助我 因为我不知道为什么控制台中总是有 NaN 一切似乎都很好 该代码应该获取输入值并进行简单的计算 不幸的是 我收到了 NaN 所以我决定使用 console log 来探索值 它向我解释了每个输入的值都是 NaN 我认为这
  • 如何使用 JavaScript 或 jQuery 从 URL 下载文件?

    我使用 jQuery fileDownload 插件从 URL 下载文件 fileDownload url contentType text csv contentDisposition attachment filename url sp
  • 单击浏览器后退按钮时,将用户带回到他们在上一页滚动到的位置

    当用户按下浏览器中的后退按钮时 是否可以将用户带回到他们向下滚动到的页面区域 如 pageA 是屏幕大小的两倍 因此您必须滚动才能阅读更多内容 您单击 pageA 上的链接转到新页面 pageB 阅读后 您在浏览器中单击 返回 现在 当您返
  • 如何绑定国家/地区更改国际电话输入

    我使用国家代码插件名称国际电话输入 js https intl tel input com 这是我的演示页面 在页面中我想清空手机 输入字段 当国家选择改变时 div class demo h3 Demo h3 div class iti
  • Flot 中轴的逗号分隔数字

    有没有办法让 Flot 使轴编号以逗号分隔 例如 用 1 000 000 代替 1000000 您可以通过使用轴的tickFormatter 属性来做到这一点 xaxis tickFormatter function val axis in
  • 如何在 Rollup 中配置从多个输入文件仅生成单个输出文件?

    配置Rollupjs生成库时 如果输入是由多个javascript文件组成的数组 我们如何才能将这些输入生成为一个输出 js 文件呢 export const lgService input src app services livegiv
  • 从 PHP/Web 应用程序打印多个标签到 Dymo LabelWriter 450 Turbo

    我希望添加使用 Dymo LabelWriter 450 Turbo 打印多个标签的功能 我已经从 Dymo 网站下载了 DYMO Label v 8 SDK dmg 但看不到任何 Javascript Web 相关的 SDK 文件或文档
  • 如何在D3中导入json数据?

    如何在D3中导入json文件 I did d3 json temp json 但是我如何在进一步的代码中访问这个数据集呢 到目前为止我已经尝试过 var data d3 json temp json 但使用 data data 在其余代码中
  • Chrome DevTools 脚本黑盒不起作用

    我正在尝试使用 chrome devtools 的新功能 黑盒脚本 这篇 Chrome Devtools 文章列出了脚本黑盒功能 https developer chrome com devtools docs blackboxing wh
  • 设备收到 GCM Android 通知但未显示

    尽管通知已在应用程序本身中注册 但我的 Ionic Android 应用程序的 GCM Cloud 消息通知未出现在我的设备的主屏幕中 我正在使用 npm 模块node gcm https www npmjs com package nod
  • 删除鼠标悬停时的 Vue 自定义过滤器

    我想使用 VueJS 2 删除鼠标悬停时的截断过滤器 这是模板中的过滤器 div class eng word english truncate div 这是过滤器本身 filters truncate function value let
  • Javascript 仅在 Chrome 中打开开发者工具后才起作用

    我和这里有同样的问题 为什么JavaScript只有在IE中打开开发者工具一次后才能工作 https stackoverflow com questions 7742781 why javascript only works after o
  • 无法在heroku上推送node.js应用程序

    我尝试在heroku 上推送我的node js 应用程序 但是 无法检测到此应用程序的默认语言 我什至尝试过heroku buildpacks set heroku nodejs 但还是无法推动 Counting objects 31 do
  • 脚本和链接标签的简写 http:// 为 // ?有人以前看过/用过这个吗?

    问题如下 如果您使用 addthis 共享按钮 查看任何网站 一旦您浮动在 addthis 按钮上 并且加载了所有必需的资源 请使用 firebug 或 chrome 检查器查看文档的正文 不是源代码 而是屏幕上的实际文档 对象检查器 你会
  • 如何提交表单 onkeyup 操作

    我正在尝试保存表格onkeyup行动 我是 jQuery 新手 这可能吗 我很感激任何帮助 编辑1 保存表单意味着保存到服务器 有没有办法增加0 2秒的延迟 此代码将在 keyup 上提交您的表单 element bind keyup fu

随机推荐

  • Vue模版语法&2种数据绑定方式

    Vue模板语法有2大类 1 插值语法 功能 用于解析标签体内容 写法 xx 其中xx是js表达式 且可以直接读取到data中的所有属性 p value p 在双大括号中 除了可以简单的传值外 还可以使用表达式 每个绑定都只能包含单个表达式
  • 中文新闻文本标题分类(基于飞桨、Text CNN)

    目录 一 设计方案概述 二 具体实现 三 结果及分析 四 总结 一 设计方案概述 主要网络模型设计 设计所使用网络模型为TextCNN 由于其本身就适用于短中句子 在标题分类这一方面应该能发挥其优势 TextCNN是Yoon Kim在201
  • R语言查看每列的缺失值

    代码 library tidyverse library naniar data gt miss var summary 注 gt 为管道函数 不懂可以看下面的链接 管道函数 miss var summary在naniar包里面
  • softwares

    视频切帧 变换分辨率 VLC 文件对比 Beyond Compare 远程控制 向日葵 TeamViewer
  • MATLAB安装配置MinGW-w64 C++编译器

    文章目录 前言 一 Mingw安装 1 安装教程 2 验证 二 MATLAB安装配置MinGW 总结 pic center 前言 只是为方便学习 不做其他用途 一 Mingw安装 在网上找到的安装一直报错 The file has been
  • uniapp(小程序)加载更多(LoadMore)在列表上的应用和刷新逻辑完善

    活动列表应用loadMore应用以及刷新逻辑完善 获取列表的方法会有3种状态 第一种是onLoad时 首屏的1页5条 第二种是加载更多触发的n页5条 以及第三种 当我们离开页面去往其他页面再回到列表页进行刷新触发的1页n条 首先先说加载更多
  • 全国DNS服务器IP地址大全、公共DNS大全

    各省公共DNS服务器IP大全 名称 各省公共DNS服务器IP大全 114 DNS 114 114 114 114 114 114 115 115 阿里 AliDNS 223 5 5 5 223 6 6 6 百度 BaiduDNS 180 7
  • 突发:香港警方警告 JPEX疑涉诈骗

    来源 香港明报 据香港明报跟进报道 未获发牌的 绿石数字资产平台 JPEX 涉疑违规在港宣传及经营 其后有客户表示提币失败 警务处长萧泽颐今日表示 警方前日收到证监会转介案件 因或涉及行骗成份 现由商业及罪案调查科跟进 至昨日下午3时收到8
  • 《UVM实战》学习笔记——第六章 sequence机制

    文章目录 前言 一 sequence的启动与执行 1 启动 2 启动方式 3 sequence分类 二 sequence的仲裁机制 1 sequence相关的宏 2 sequencer的仲裁算法 6种 3 sequence独占sequenc
  • USB HUB简述

    概述 hub 集线器 连接在host与device之间的一种用于usb接口扩展的usb设备 可以将一个usb上行接口扩展为多个下行接口 使得一个host可以同时与多个device连接 一般来说 一块hub桥接芯片可扩展4个usb接口 而市面
  • ‘dtools’不是内部或外部命令,也不是可运行的程序或批处理文件,个人解决方案

    powershell或cmd执行时出现 dtools 不是内部或外部命令 也不是可运行的程序或批处理文件 奇怪的是 我的工程目录下明明有dtools exe可执行文件 搜索引擎上多数反馈是添加C system32等路径到环境变量 但后续发现
  • 亲密关系-【沟通提示】-如何把学习到的东西用到生活中

    关于亲密关系 我学到了这么多 可为什么ta对这些毫不在意 我知道课里的观点都很重要 可我该怎么教会ta ta没有意识 看画面 案例 妈妈说话总是带有攻击性 总是骂她 怎么说 常见误区 你不要老师贬低我 对方苦苦思考 我到底该怎么办 你下意识
  • java中的多重循环

    多重循环 一个循环体内又包含另一个完整的循环结构 如下 while 循环条件1 循环操作1 while 循环条件2 循环操作2 do 循环操作1 do 循环操作2 while 循环条件2 while 循环条件1 for 循环条件1 循环操作
  • Docker - 使用Docker Compose部署应用

    简介 Docker Compose是一个基于Docker Engine进行安装的Python工具 该工具使得用户可以在一个声明式的配置文件中定义一个多容器的应用 在Docker节点上 以单引擎模式 Single Engine Mode 进行
  • 手写算法-python代码实现Lasso回归

    手写算法 python代码实现Lasso回归 Lasso回归简介 Lasso回归分析与python代码实现 1 python实现坐标轴下降法求解Lasso 调用sklearn的Lasso回归对比 2 近似梯度下降法python代码实现Las
  • 【直达本质讲运放】运放的“第一原理”式定量分析法

    数电 模电那两本书我也完整地翻过一 二遍 诶我为什么用 也 下面就是来点不复杂的 如果是那还不如直接把书的内容粘过来呢 对于运放的定量分析 虚短虚断 就如同 奇变偶不变 一样喜闻乐见的普及 但是对于什么时候用 虚短 什么时候用 虚断 学习的
  • Ridge和Lasso回归

    上周看了看回归方面的知识 顺便复 xue 习一下Ridge 岭回归 和Lasso回归 套索回归 瞅到了一篇英文博客讲得不错 翻译一下 本文翻译自 Ridge and Lasso Regression 本文是一篇Josh Starmer关于
  • 常用网络协议神图

  • 凸优化(一)——Introduction

    Introduction 一 最优化问题的数学表达 在最优问题中 其数学表达往往能化成标准形式 如下 minimizef0 x subject tofi x bi i 1 m begin aligned minimize quad f 0
  • 微信小程序对上传的图片进行裁剪

    背景 使用uniapp中uni chooseImage的裁剪参数crop只能在App中生效 在微信小程序中不生效 实现思路 uni chooseImage打开相册获取图片路径 uni chooseImage OBJECT uni app官网