【无标题】

最新推荐文章于 2024-09-06 22:20:29 发布

普普通通0

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量30

点赞数

文章标签：前端

原文链接：http://t.csdn.cn/KA8Z5

版权

<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-25cebea3f9.css">
<div id="content_views" class="htmledit_views">
<h2><a name="t0"></a>一、实现效果</h2>
<p><img alt="" height="439" src="https://img-blog.csdnimg.cn/c80ddc22ed1b4ef1b7d1c88c8fcb8623.png" width="204"><img alt="" height="438" src="https://img-blog.csdnimg.cn/f8ec1d8ba8014332ba7123cd4eb23cb4.jpeg" width="201"></p>
<h2><a name="t1"></a> 二、实现功能</h2>
<p>1、可以拍摄或选择本地图片上传图片数据</p>
<p>2、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小，还可以缩放操作，需要的可以解除限制即可</p>
<h2><a name="t2"></a>三、实现思路</h2>
<p>1、点击图片上传按钮时，<a href="https://so.csdn.net/so/search?q=%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"跳转页面\"}"}" data-tit="跳转页面" data-pretit="跳转页面">跳转页面</a>到cropper进行图片选择剪切</p>
<p>wx.<a href="https://so.csdn.net/so/search?q=navigateTo&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=navigateTo&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"navigateTo\"}"}" data-tit="navigateTo" data-pretit="navigateto">navigateTo</a>({</p>
<p>      url: `/pages/cropper/cropper?disable_width=true&disable_height=true`</p>
<p>    });</p>
<p> 2、/pages/cropper/cropper页面会直接弹出选择拍照还是本地图片上传，当取消后会返回到上一层</p>
<p>3、页面会进行图片编辑操作，操作好后，通过上传按钮，将本地图片路径先存储到公共app.globalData里面，然后跳转到上一层（主页面）。</p>
<p>4、主页面<a href="https://so.csdn.net/so/search?q=onshow&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=onshow&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"onshow\"}"}" data-tit="onshow" data-pretit="onshow">onshow</a>检索到app.globalData页面路径是否不为空，不为空后将调用上传方法，将路径传递给服务器（不懂的可以查找我主页上传图片的文章）</p>
<p>5、上传成功后，将app.globalData页面的参数清空即可。</p>
<p>6、实现操作简单，方便快捷为用户手机操作图片，进行图片的统一展示。</p>
<h2><a name="t3"></a>四、提示</h2>
<p>需要的用户可以自用下载资源实践，不懂的可以联系我哦，一起商量探讨</p>
<p></p>
</div><div><div></div></div>
</div>