本文共 826 字，大约阅读时间需要 2 分钟。
背景：
当前主流的图片剪裁实现方式主要有两种：一种是通过Flash操作，另一种是利用JavaScript和DOM操作。但现行的剪裁流程仍存在一些问题，例如需要先将图片上传到服务器，前后端需要多次交互，数据传输繁冗。传统的剪裁实现方式显得有些低级了。我尝试利用Canvas技术来实现剪裁功能。通过对网上资源的研究，我发现虽然有Jcrop等类似插件存在，但它们的本质仍然是需要将图片上传到后台，最后由后端处理，与传统方式并无本质区别。
自主实现前端剪裁：
后来，我灵感一现，意识到Canvas可以存储Base64数据。基于此，我设计了一种新的剪裁流程。具体步骤如下：实现细节：
this._option.crop_min_width = 640; this._option.crop_min_height = 640;
this._option.crop_box_width = 300; this._option.crop_box_height = 200;
-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none
代码实现虽然不够规范，但已实现了基本需求。点击保存按钮，系统会生成按照原图比例的剪裁图片，并通过Base64编码直接上传至后台。
默认要求用户选取640x640以上的图片，以确保剪裁后的图片质量。以下是该方案的Git地址，您可以拉取代码进行测试。
转载地址：http://zhxzz.baihongyu.com/