JavaScript如何实现小程序图片裁剪功能

这篇文章主要介绍“JavaScript如何实现小程序图片裁剪功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript如何实现小程序图片裁剪功能”文章能帮助大家解决问题。要做图片裁剪，首先要解决的是图片上传的事情，这块在微信环境下，比较好处理，微信小程序提供了多个文件或图片的操作接口，让我们可以很方便的完成这个步骤。小程序中图片上传比较简单，直接使用已提供的接口 chooseMedia ，用于选择媒体文件（图片或视频）：除此外，还可以有其他方式，如 wx.chooseMessageFile 接口可以从聊天记录里选择图片，我们可以综合处理如下：其中，showActionSheet 可以显示操作菜单，这个功能也比较常见，可以从拍照、相册、聊天记录里选择文件进行加载：当前，我们获取到的是图片文件的临时路径，得到图片路径以后，接下来要做的事情，就是如何正确适配的显示出来。由于要在前端对图片进行裁剪，使用canvas绘制图片也是不可少的，在绘制之前，我们需要根据图片尺寸进行适配处理。首先需要做的就是读取图片的尺寸大小，使用小程序的 wx.getImageInfo 接口即可，它能够返回图片原始的宽高属性。接着，根据图片的宽高属性、系统屏幕的宽高，一起在小程序页面可见区域内设置图片的缩放显示：通过以上代码和注释，我们知道了图片加载时，需要计算的几个宽高尺寸值，都是比较重要的。下面就可以在页面上显示图片，直接展示图片显示区域的 wxml 代码：以上代码中，.crop-content外层增加图片面板，图片资源直接使用 组件加载，与外层面板宽高保持一致；.mask-bg增加一个遮罩层，作为非裁剪区域的蒙层，以黑灰色透明度实现效果；.clip-path于图片面板内部，设置图片的裁剪区域，这里使用的是CSS中的 clip-path 属性，内部加载一张图片，作为裁剪区域的图片显示；clip-box设置裁剪框区域的四个corner角：左上、右上、右下和左下，里面四个元素对应这个四个角，可以对裁剪框进行缩放处理；
当然，我们也可以在各边的中间位置再加上操作区，那免费云主机域名一共就是8个；.clip-path图片裁剪区与 clip-box 裁剪框需要设置位置信息，用于在移动的时候进行定位。通过设置对应的图片元素、蒙层、裁剪框等等，我们就已经完成了图片裁剪的结构布局了，具体可见下图所示：图片裁剪框设置完成后，我们需要处理的就是裁剪框的拖动与缩放事件处理了。上面的 wxml 代码中，在裁剪框的元素部分，已经增加了 touchstart 和 touchmove 等事件，用于在处理拖动和缩放等操作。当我们实现裁剪框的拖动，只需要如下两个事件：以上代码，通过计算图片移动时的相对位移，重新计算裁剪框的新的位置信息，需要注意的是，移动时不要脱离外层的面板——即不能脱离图片区域，否则无效。缩放的操作则相对复杂一些，需要计算位移移动的距离以及当前位置下的裁剪宽高数据，并且要对每个不同的corner角进行特殊处理，这块的完整代码和注释如下所示：至此，图片裁剪的功能基本完成了，能够加载图片、设置裁剪框、拖动和缩放裁剪框大小，计算裁剪图片的尺寸等等。接下来，就剩下如何真正剪裁图片了。要剪裁图片，我们在小程序使用canvas画布组件来处理，在页面上增加一个canvas元素：由于这个canvas只是用来对图片进行裁剪操作，并不需要显示出来，我们可以把它定位到视觉窗口以外，不影响可操作的界面元素。给画布设置图片裁剪所需要的宽高，通过在同等宽高下绘制图片，就能导出图片：如上代码所示，通过裁剪图片的真实宽高以及相对位置信息，通过canvas的 drawImage 方法，把图片的裁剪区域的内容绘制到画布上，此时，该画布就对应一张裁剪后的图片，我们只需要把画布导出成图片文件即可。导出画布，使用 wx.canvasToTempFilePath 方法，用于将画布导出为图片临时图片文件，这个图片文件可以重新加载或者进行导出。以上过程，生成裁剪图片的临时文件后，就可以使用小程序提供的API，将图片文件保存到相册中。只需要使用 wx.saveImageToPhotosAlbum 方法，专门用于将图片文件保存到系统相册，接收临时文件作为参数：该方法简单方便，其中使用 wx.vibrateShort() 方法，作用是使手机发生较短时间的振动（15 ms），在小程序也是常见的功能。图片保存到系统相册功能完成后，我们就实现了在小程序中进行图片剪裁的完整功能，包含加载图片、图片适配和裁剪框绘制、裁剪框拖动与缩放事件、图片导出和保存的过程。关于“JavaScript如何实现小程序图片裁剪功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: Elasticsearch映射字段数据类型及管理的方法

本篇内容主要讲解“Elasticsearch映射字段数据类型及管理的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Elasticsearch映射字段数据类型及管理的方法”吧!在Elasticsearch 6.0…