关于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)
生成图片文件。