微信小程序--图片裁剪(记录遇到的坑坑)

最新推荐文章于 2024-03-23 09:58:17 发布
最新推荐文章于 2024-03-23 09:58:17 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： java，html

**1.项目结构

这里写图片描述
源码下载: https://gitee.com/xinchun/we-cropper

2.使用场景

由于小程序提供的不足以满足需求,所以在网上找到了一个符合需求的插件,自己稍微改下逻辑基本够用.

3.使用步骤

  1. 当然是先创建小程序项目了(不会的参考https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114)
  2. 在小程序的任意页面 .wxml填写web-view 这里写图片描述 路径指向插件的项目地址.

  3. 运行图
    这里写图片描述
    这里写图片描述
    这里写图片描述

  4. . 最后希望大家多多指教,此插件参考 https://github.com/dailc/image-process/blob/master/src/clip/README.md**

xiaozhuangping
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
we-cropper 一款灵活小巧的canvas图片裁剪器
06-11
Usage 克隆至本地处理 git clone https://github.com/we-plugin/we-cropper.git npm方式引入 npm install we-cropper --save
小程序图片裁剪we-cropper的使用
Jester的博客
05-27 9199
小程序涉及到了用户上传头像的功能，用户可以手动选择裁剪区域。 （1）上传头像页面 选择图片，将得到的src地址传递到图片裁剪页面 wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: function(res) { ...
推荐项目：WeCropper - 纯JavaScript的图片裁剪库
最新发布
gitblog_00024的博客
03-23 311
推荐项目：WeCropper - 纯JavaScript的图片裁剪库 项目地址:https://gitcode.com/we-plugin/we-cropper 在Web开发中，图片处理是一个常见的需求，特别是在用户需要上传头像或进行图片预览时。今天，我们向您推荐一款轻量级、高性能的纯JavaScript图片裁剪库——WeCropper。这款项目旨在为移动浏览器提供流畅的图片裁剪体验，无论是在原生...
小程序基本命令
aiven1637的博客
10-30 3204
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
小程序图片裁剪组件
白帆船长的博客
06-08 1万+
最近开始做微信小程序项目，其中有需要图片裁剪的功能。 微信小程序拥有许多方便的API，相机相册调用作为移动端使用频率最高的API之一，小程序做了非常好的封装，使用上也非常舒服。然而，翻遍了整篇小程序开发文档，仍然没能找到裁剪相关的描述。难道小程序官方没考虑过为小程序提供一个裁剪API吗。 裁剪API是没找到，优秀的开源的第三方裁剪组件还是能找到一些的，试用了几个，跟自己预期的裁剪方法不太一样，...
小程序canvas画入圆形图片
jenkinz的博客
11-20 6090
一般情况下画入圆形图片 canvas.save(); canvas.beginPath() //开始创建一个路径 canvas.arc(50, 50, 50, 0, 2 * Math.PI, false) //画一个圆形裁剪区域 canvas.clip() //裁剪 canvas.drawImage("../../images/123.png", 0, 0, 100, 100) //绘制...
微信小程序-图片裁剪、旋转、预览、上传功能实现
11-29
1、点击图片上传按钮时，跳转页面到cropper进行图片选择剪切wx.navigateTo({ url: `/pages/...8、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小，还可以缩放操作，需要的可以解除限制即可。
微信小程序-微信小程序-豆瓣电影
08-06
微信小程序-豆瓣电影-测试案例 1、app.js 封装请求方式函数 fetchApi 2、app.json 配置文件(配置页面样式、多少页面、菜单按钮) 3、app.wxss 全局样式文件（定义页面的全局样式） 4、效果图 5、填入appid后保错...
微信小程序-微信小程序－微赞论坛
08-06
微信小程序－微赞论坛 说明： 实现微赞论坛部分功能，包括帖子列表，发表帖子和个人信息页。 数据接口: 使用本地数据 目录结构： data — 存放本地模拟数据 images — 存放项目图片相关文件 pages — 存放项目页面...
【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）
03-19
【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）.zip 【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）.zip 【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）.zip 【微信小程序-...
微信小程序-校园综合服务平台系统源码.zip
05-28
微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务...
微信小程序图片裁剪功能的实现
jimojianghu的专栏
03-08 9118
本文详细讲述了在小程序中实现一个图片裁剪功能的过程，可以看出和在浏览器Web端的实现差别并不大。在核心的图片适配、裁剪框绘制与缩放事件处理上，基本两边可以通用，在小程序中的实现逻辑可以完整在移到web浏览器上，反之亦然。区别可能只只在于图片的加载和保存上，可以使用小程序提供的多种内置接口方法，能教方便的完成。
微信小程序裁剪图片成圆形
weixin_33770878的博客
10-11 517
前言最近在开发小程序，产品经理提了一个需求，要求微信小程序换头像，用户剪裁图片必须是圆形，也在github上看了一些例子，一般剪裁图片用的都是方形，所以自己打算写一个小组件，可以把图片剪裁成圆形，主要思路就是使用canvas绘图，把剪裁的图片绘制成圆形，另外剪裁图片的窗口还可以移动放大缩小，这个功能就用了微信组件movable-view，好了，该说的也说完了，下面咱们开始撸代码。movable-v...
微信小程序图片设置成圆形
qq_39940377的博客
01-03 2721
只要在相对应的class上加上下面2条语句即可。 border-radius: 50%; overflow:hidden;
微信小程序canvas绘制圆形图片
热门推荐
CherryCola_zjl的博客
11-06 1万+
canvas基础知识补齐一下，明白了原理便很简单。 先使用.arc绘制一个圆圈，通过.clip裁剪，绘制在圆圈内的内容会出现，其他的都会隐藏。 .drawImage的绘制位置是相对原画布，而不是圆圈，这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。 //保存上文 targetCtx.save() targetCtx.beginPath() targetCtx.arc(110, 60,...
uniapp 微信小程序使用we-cropper实现图片裁剪
weixin_71403100的博客
12-25 1087
在开发微信小程序时，经常需要实现用户上传图像并进行裁剪操作的功能。为了实现这一需求，使用了uniapp作为开发框架，并结合了we-cropper这一图像裁剪插件来实现图片裁剪的功能。
微信小程序图片上传和裁剪
hbqjzx的专栏
02-28 5867
本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等。 图片裁剪解决方案： 　　目前网络上知名的微信小程序图片裁剪插件是we-cropper（文末有链接） 　　操作步骤：下载好we-cropper文件夹，拷贝到小程序目录，可以放在pages列表中。 　　第一步：wxml中引入插件的wxml，使用模板，编写按钮绑定事件。 　　第二步，js中引入插件的js，设置参数，初始化对象。 　　请看下方操作： 　　wxml中： <import src="../we-crop
小程序上传图片裁剪工具 we-cropper的使用方法
hjh15827475896的博客
10-09 3538
小程序中提供了上传文件的api wx.uploadfile() 但是，当用户上传头像或其它图片时，希望经过裁剪了之后再上传，微信没有提供裁剪的功能 我个可以从 github 上找到一个插件 we-cropper 还有一个插件叫image-cropper（这个有兴趣可以研究一下，本人没有用过） 地址：https://github.com/we-plugin/we-cropper ...
微信小程序--中英文切换（1）
06-02
您好，我可以回答您关于微信小程序中英文切换的问题。 在微信小程序中实现中英文切换，可以通过以下两种方式： 1. 使用语言包 在开发微信小程序时，可以利用语言包来实现中英文切换。语言包是一个对象，包含了...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值