微信小程序编辑

wx.downloadFile({
          url: 'https://profile.csdnimg.cn/9/5/6/2_ordercode', //仅为示例,并非真实的资源
          success (res) {
            // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
            console.log(res,'res000')

            if (res.statusCode === 200) {
              console.log(res.tempFilePath,'tempFilePath 000')

              wx.editImage({
                src: res.tempFilePath, // 图片路径
                complete:function(resn){
                  console.log(resn,'resn00')
                }
              })
            }
          }
})

wx.editImage(Object object) | 微信开放文档  支持编辑图片,保存本地。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
参加比赛的作品,开发周期一个月,使用了 Wafer2 框架,后台采用腾讯云提供的 Node.js SDK 接入对象存储 API ,前端核心代码实现了类似于图片编辑器的功能,支持图片和文字的移动、旋转、缩放、生成预览图以及编辑状态的保存,动画部分采用 CSS 动画实现小程序中的模态输入框部分使用了自己封装的 InputBox 组件代码已移除 AppId 等敏感信息,可自行添加自己的 AppId 和 AppSecret 以配置后台环境,实现登录测试,详细添加方法见下文「使用方法」,若本地运行可通过修改 app.json 文件中 page 字段的顺序来查看不同页面微信小程序定制需求请联系作者微信:aweawds (注明来意)效果展示      使用方法首先点击右上角 Star ʕ •ᴥ•ʔ获取Demo代码执行 git clone https://github.com/goolhanrry/Weapp-Demo-LemonJournal.git或 点击此处 下载最新版本的代码解压后在微信开发者工具中打开 Weapp-Demo-LemonJournal 文件夹即可如需进行登录测试,还要执行以下步骤准备好自己的 AppId 和 AppSecret(可在微信公众平台注册后获取)在 project.config.json 的 appid 字段中填入 AppId在 /client/utils/util.js 中相应位置填入 AppId 和 AppSecret在微信开发者工具中重新导入整个项目,上传后台代码后编译运行即可核心代码组件的移动、旋转和缩放主要思路是把  标签(对应图片)和  标签(对应文字)封装在同一个自定义组件  中,通过对外暴露的 text 变量是否为空来进行条件渲染,然后绑定 onTouchStart() 、onTouchEnd() 和 onTouchMove() 三个事件来对整个组件的位置、角度、大小、层级以及 “旋转” 和 “移除” 两个按钮的行为进行操作onTouchStart: function (e) {     // 若未选中则直接返回     if (!this.data.selected) {         return     }     switch (e.target.id) {         case 'sticker': {             this.touch_target = e.target.id             this.start_x = e.touches[0].clientX * 2             this.start_y = e.touches[0].clientY * 2             break         }         case 'handle': {             // 隐藏移除按钮             this.setData({                 hideRemove: true             })             this.touch_target = e.target.id             this.start_x = e.touches[0].clientX * 2             this.start_y = e.touches[0].clientY * 2             this.sticker_center_x = this.data.stickerCenterX;             this.sticker_center_y = this.data.stickerCenterY;             this.remove_center_x = this.data.removeCenterX;             this.remove_center_y = this.data.removeCenterY;             this.handle_center_x = this.data.handleCenterX;             this.handle_center_y = this.data.handleCenterY;             this.scale = this.data.scale;             this.rotate = this.data.rotate;             break         }     } }, onTouchEnd: function (e) {     this.active()     this.touch_target = ''     // 显示移除按钮     this.setData({         removeCenterX: 2 * this.data.stickerCenterX - this.data.handleCenterX,         removeCenterY: 2 * this.data.stickerCenterY - this.data.handleCenterY,         hideRemove: false     })     // 若点击移除按钮则触发移除事件,否则触发刷新数据事件     if (e.target.id === 'remove') {         this.triggerEvent('removeSticker', this.data.sticker_id)     } else {         this.triggerEvent('refreshData', this.data)     } }, onTouchMove: function (e) {     // 若无选中目标则返回     if (!this.touch_target) {         return     }     var current_x = e.touches[0].clientX * 2     var current_y = e.touches[0].clientY * 2     var diff_x = current_x - this.start_x     var diff_y = current_y - this.start_y     switch (e.target.id) {         case 'sticker': {             // 拖动组件则所有控件同时移动             this.setData({                 stickerCenterX: this.data.stickerCenterX   diff_x,                 stickerCenterY: this.data.stickerCenterY   diff_y,                 removeCenterX: this.data.removeCenterX   diff_x,                 removeCenterY: this.data.removeCenterY   diff_y,                 handleCenterX: this.data.handleCenterX   diff_x,                 handleCenterY: this.data.handleCenterY   diff_y             })             break         }         case 'handle': {             // 拖动操作按钮则原地旋转缩放             this.setData({                 handleCenterX: this.data.handleCenterX   diff_x,                 handleCenterY: this.data.handleCenterY   diff_y             })             var diff_x_before = this.handle_center_x - this.sticker_center_x;             var diff_y_before = this.handle_center_y - this.sticker_center_y;             var diff_x_after = this.data.handleCenterX - this.sticker_center_x;             var diff_y_after = this.data.handleCenterY - this.sticker_center_y;             var distance_before = Math.sqrt(diff_x_before * diff_x_before   diff_y_before * diff_y_before);             var distance_after = Math.sqrt(diff_x_after * diff_x_after   diff_y_after * diff_y_after);             var angle_before = Math.atan2(diff_y_before, diff_x_before) / Math.PI * 180;             var angle_after = Math.atan2(diff_y_after, diff_x_after) / Math.PI * 180;             this.setData({                 scale: distance_after / distance_before * this.scale,                 rotate: angle_after - angle_before   this.rotate             })             break         }     }     this.start_x = current_x;     this.start_y = current_y; }编辑状态的保存一篇手帐包含的组件类型包括 sticker(软件自带的贴纸)、image(用户上传的图片)和 text(自定义文字)三种,全部保存在一个如下格式的 json 对象中,每个独立组件都包含了一个不重复的 id 以及相关的信息,保存时由客户端生成该对象并编码成 json 字符串存储在数据库,恢复编辑状态时通过解析 json 字符串获得对象,再由编辑页面渲染{     "backgroundId": "5",                                        背景图id     "assemblies": [         {             "id": "jhjg",                                       组件id             "component_type": "image",                          组件类型(自定义图片)             "image_url": "https://example.com/jhjg.png",        图片地址             "stickerCenterX": 269,                              中心横坐标             "stickerCenterY": 664,                              中心纵坐标             "scale": 1.7123667831396403,                        缩放比例             "rotate": -3.0127875041833434,                      旋转角度             "wh_scale": 1,                                      图片宽高比             "z_index": 19                                       组件层级         },         {             "id": "gs47",             "component_type": "text",                           组件类型(文字)             "text": "test",                                     文字内容             "stickerCenterX": 479,             "stickerCenterY": 546,             "scale": 1.808535318980528,             "rotate": 29.11614626607893,             "z_index": 10         },         {             "id": "chjn",             "component_type": "sticker",                        组件类型(贴纸)             "sticker_type": "food",                             贴纸类型             "sticker_id": "1",                                  贴纸id             "image_url": "https://example.com/weapp/stickers/food/1.png",             "stickerCenterX": 277,             "stickerCenterY": 260,             "scale": 1.3984276885130673,             "rotate": -16.620756913892055,             "z_index": 5         }     ] }
### 回答1: Editor微信小程序编辑控件是一种用于实现富文本编辑的工具。它提供了一系列的编辑功能,包括字体样式设置、字号设置、加粗、斜体、下划线、对齐方式、插入图片和链接等。开发者可以通过调用Editor组件,将其集成到自己的小程序页面中。 使用Editor控件时,开发者可以灵活地控制编辑区域的样式和功能。通过设置合适的 CSS 样式,可以使编辑区域适应不同设备的屏幕大小。此外,通过配置不同的toolbar选项,开发者可以自定义编辑工具栏的按钮和功能,满足不同的编辑需求。 Editor控件还提供了一些丰富的API接口,方便开发者对编辑内容进行控制和操作。开发者可以通过API获取编辑器的内容,进行特定格式的导出和保存。同时,也可以实现一些自定义的操作,比如将编辑内容转化为HTML格式、设置光标位置等。 总之,Editor微信小程序编辑控件是一种功能强大的工具,可以帮助开发者实现富文本编辑功能。通过简单的集成和配置,开发者可以轻松创建一个交互友好的编辑界面,提升用户体验。无论是创建一个文本编辑器、留言板、富文本展示页面,还是其他需要富文本编辑的场景,Editor控件都能够满足需求,使小程序更加丰富多样。 ### 回答2: Editor是微信小程序提供的一个编辑器控件,可以用于编辑富文本内容。它可以在小程序内部被使用,允许用户进行文字、图片、表情等多种类型的编辑操作。 Editor具有以下一些特点和功能: 1. 富文本编辑:用户可以在Editor中输入和编辑富文本内容,包括文字、图片、表情等。可以通过编辑器的工具栏来设置字体样式、大小、颜色等,使得编辑过程更加灵活方便。 2. 图片和表情插入:用户可以在编辑器中插入图片和表情,可以通过上传图片文件或者选择从相册中选取图片,进而将其插入到编辑器中,方便用户对内容进行丰富的表达。 3. 撤销和重做:用户操作时,可以通过撤销和重做功能来进行操作的撤销和再次执行。这个功能可以有效地帮助用户在编辑错误时及时纠正,提高用户的编辑体验。 4. 全局替换:用户可以在编辑器中进行全局替换操作,方便用户对文本内容进行批量修改。 5. 内容限制和过滤:可以对编辑器中的内容进行限制和过滤,如限制输入长度、限制输入格式,或者过滤敏感词等。 6. 数据获取和保存:用户编辑完成后,可以通过Editor提供的API获取编辑器中的内容。用户可以将内容保存在本地或者上传到服务器进行保存和分享。 总之,Editor是一个功能强大的微信小程序编辑控件,可以为小程序带来丰富的编辑和内容创作功能,提升用户的编辑体验。同时,开发者还可以根据项目需求进行二次开发,加入更多个性化的功能和效果,以满足不同用户的需求。 ### 回答3: Editor微信小程序编辑控件是一种用于在小程序中创建和编辑富文本内容的组件。它能够提供给用户一个类似于富文本编辑器的界面,方便用户对文本样式、排版、图片等进行编辑和修改。 通过Editor编辑控件,用户可以直观地设置文字的字体、颜色、大小、加粗、斜体等样式,还可以插入链接、表格、图片和视频等多媒体内容。同时,用户还可以对文本的对齐方式、首行缩进、段落间距等进行调整,以实现更好的视觉效果。 对于开发者而言,Editor微信小程序编辑控件的接入和使用也是相对简便的。只需要在小程序的相关页面中引入Editor组件,并通过设置相应的属性,即可实现所需的编辑功能。开发者还可以监听编辑器的各种事件,如用户输入、插入图片等,并根据需要进行相应的处理。 使用Editor编辑控件可以为小程序增加更具交互性和丰富性的功能,使得用户可以更方便地编辑和发布富文本内容。无论是进行文章编辑、动态发布,还是进行社交互动,Editor都能提供良好的用户体验,并帮助用户实现更多样化的内容表达需求。 总而言之,Editor微信小程序编辑控件是一种功能强大、易用性高的富文本编辑组件,它为用户和开发者提供了灵活的编辑功能,使得小程序中的文本编辑和内容创作更加便捷和多样化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值