关于PHP+JQuery图片上传，裁剪，并存储的一些总结

关于JS的三大误区。

==误区1：js可以生成图片文件？==

js不能操作文件，只能形成裁剪效果，无法生成图片文件。

==误区2：js选择文件时，可以获得文件路径。==

js选择文件时，无法获取文件在个人电脑中的路径。

==误区3：js可以通过

$("input").val()

为

<input type=file>

赋值。==

js不能为

<input type=file>

自动赋值，出于安全方面考虑，fileinput文件只能手动选择。

关于文件上传，截图，并存储的思路

思路1：

使用jquery裁剪插件cropper直接上传，裁剪图片并传到后台服务器。

==最终由于误区1，失败。==

思路2：

使用jquery裁剪插件cropper直接上传，形成裁剪图片效果

将原图的路径、起始坐标：x,y 裁剪后图片的宽和高：w,h 传到后台服务器

使用php对图片进行截取和保存

==最终由于误区2，失败。==

思路3：

使用jquery裁剪插件cropper直接上传，形成裁剪图片效果

使用Html5的canvas根据原图，坐标和宽高进行裁剪

将生成的图片填入到

<input type=file>

表单中进行提交。

==最终由于误区3，失败。==

思路4：

使用jquery裁剪插件cropper直接上传，形成裁剪图片效果

使用Html5的canvas根据原图，坐标和宽高进行裁剪，将生成的图片（data:image/jpeg;base64编码）直接Post给后台服务器

PHP使用

$img = base64_decode($img_base64)

解码，再使用

file_put_contents("./uploads/media/{$img_name}", $img)

生成图片文件。

==成功==