【微信小程序】图片裁剪 前端裁剪 后端裁剪

微信小程序裁剪组件，支持前端裁剪和后端裁剪两种方式

1.前端裁剪：将裁剪框指定的区域，单独生成图片，获取裁剪图片的临时文件路径

2.后端裁剪：获取裁剪框相对于原图的像素坐标位置，将裁剪区域坐标以及原图临时文件路径，传到后端进行图片裁剪

https://gitee.com/gnliscream/image-cropper

使用微信小程序自定义组件开发

小程序自定义组件官网： https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

添加image-cropper标签，如下

可以在image-cropper标签内添加 *** 作按钮，如下

首先需要在onLoad方法中，设置裁剪标签属性

然后添加按钮相应的绑定方法

获取到的res如下

获取到的裁剪参数的对应关系图

获取到裁剪参数后，将原图以及裁剪参数传到后台进行裁剪

2.获取裁剪图片地址

获取到的res如下

用位图对象的Clone 方法就可以获取图片某个区域成一个新的位图对象，下面例子：

    Private Sub Form1_Click(sender As Object, e As EventArgs) Handles Me.Click

        Dim img As New Bitmap("d:\015.jpg")

        Dim rc As Rectangle = New Rectangle(500, 500, 600, 600)   '起点和长宽

        Dim newImg As Bitmap = img.Clone(rc, Imaging.PixelFormat.Format32bppArgb)

        Me.CreateGraphics.DrawImage(newImg, 0, 0)

    End Sub

php中裁剪图片主要使用gd库的imagecopyresampled方法

$src_path = '1.jpg'

//创建源图的实例

$src = imagecreatefromstring(file_get_contents($src_path))

//裁剪开区域左上角的点的坐标

$x = 100

$y = 12

//裁剪区域的宽和高

$width = 200

$height = 200

//最终保存成图片的宽和高，和源要等比例，否则会变形

$final_width = 100

$final_height = round($final_width * $height / $width)

//将裁剪区域复制到新图片上，并根据源和目标的宽高进行缩放或者拉升

$new_image = imagecreatetruecolor($final_width, $final_height)

imagecopyresampled($new_image, $src, 0, 0, $x, $y, $final_width, $final_height, $width, $height)

//输出图片

header('Content-Type: image/jpeg')

imagejpeg($new_image)

imagedestroy($src)

imagedestroy($new_image)

---