完美剪切和上传mui图片（包括服务器端，相册选择和拍照，可以直接运行）

附件包含源代码下载

   。  

开放背景:

我在Internet上找到了很多信息. 总结之后，我写了一个这样的例子. 现在已经组织了完整的代码，包括前端的完整Hbuilder工程代码和后端的Java实现. 图像裁剪使用jquery.cropper插件，因此此图像裁剪功能模块需要使用jquery. 我还尝试编写一些代码来实现基本的图片放大和缩小. 图片移动后，我感到头晕. 插件更合适. 在详细了解了裁剪器插件之后，感觉太强大了. 它与PC，Android，iOS等兼容. 某些特殊功能可以满足我个人对图像裁剪的所有需求. 插件下载地址为: ，您也可以找到该插件的操作，也可以下载附件的源代码，并在源代码中打开docs / index.html文件以运行直接的代码示例. 功能包括: 图片的拖动和缩放，移动背景图片，移动裁切区域，调整选区的大小完美播放器java版，移动选区，更改照片的左右，旋转等. 这些功能还用于这个例子.

后端处理:

无论使用哪种语言，其目的都是在用户切割完成后存储数据. 由于前端剪切使用画布来剪切图片，因此提交给后端的是裁剪的区域图片字符串编码完美播放器java版，后端需要使用base64解码将该字符串转换为图片文件，而不是图片文件. . . 也就是说，这里的后端处理文件上传不是图像上传的传统处理，而是对base64字符串进行解码. 如果不清楚base64字符串编码和图像转换，则可以使用单词验证. 这里临时编写了一个简单的Java Servlet程序来处理文件上传. 参考代码如下:

package com;  
import java.io.File;  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.OutputStream;  
import java.io.PrintWriter;  
import java.util.UUID;  
import javax.servlet.ServletException;  
import javax.servlet.annotation.WebServlet;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import com.alibaba.fastjson.JSONObject;  
import com.alibaba.fastjson.util.Base64;  
import com.frame.base.utils.properties.PropertiesUtils;  
import com.frame.base.utils.properties.enums.EnumProperties;  
@WebServlet("/testaa.servlet")  
public class Test extends HttpServlet {  
    private static final long serialVersionUID = 1L;  
    @Override  
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        String imageBase64 = req.getParameter("imageBase64");  
        //将base64的图片编码存储至服务器，并将路径修改至  
        String type = "data:image/png;base64,";//前台是以png的格式存储的  
        imageBase64 = imageBase64.substring(type.length());  
        String realPath = "sysuser" + File.separator + UUID.randomUUID().toString() + ".png";  
        JSONObject json = new JSONObject();  
        try {  
            this.uploadFileByBase64(realPath , imageBase64);  
            json.put("result", "success");  
            json.put("message", realPath);  
        } catch (Exception e) {  
            json.put("result", "error");  
            json.put("message", "上传图片失败!");  
            e.printStackTrace();  
        }  
        //将参数输出至浏览器  
        PrintWriter out = resp.getWriter();  
        out.write(json.toJSONString());  
        out.flush();  
        out.close();  
    }  
    @Override  
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        this.doGet(req, resp);  
    }  
    public File uploadFileByBase64(String destRealPath , String imageBase64) throws Exception{  
        OutputStream out = null;  
        try {  
            byte bytes[] = Base64.decodeFast(imageBase64);  
            //这里是我的获取图片文件服务器的路径，可以是随便一个地址，如d:\\temp\\之类的  
            String imageServer = PropertiesUtils.getInstance().getProperty(EnumProperties.APPLICATION, "system.fileupload.information");  
            String destFilePath = imageServer + File.separator + destRealPath;  
            File destFile = new File(destFilePath);  
            if(! destFile.getParentFile().exists()){  
                destFile.getParentFile().mkdirs();  
            }  
            for(int i=0 , lens = bytes.length ; i < lens ; i++){  
                if(bytes[i] < 0){  
                    bytes[i] += 256;  
                }  
            }  
            out = new FileOutputStream(destFile);  
            out.write(bytes);  
            return destFile;  
        } catch (Exception e) {  
            throw new Exception(e);  
        } finally {  
            if(out != null){  
                try {  
                    out.flush();  
                    out.close();  
                } catch (IOException e) {  
                    e.printStackTrace();  
                }  
            }  
        }  
    }  
}  

图片上传到服务器下载

服务器端是我临时编写的代码. 如果该示例提示上传失败，则可能是我的服务器已关闭并且无法正常访问. 如果正在运行的示例中的上传提示成功，则可以将相关地址复制到浏览器以访问我的服务器. 将输出上传到服务器的裁剪图像. 图片的结束地址是.image，即xxxxx.png.image

其他说明

前台代码中使用了一些windows.xxx，没有其他含义，只是不想定义所有变量.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-224675-1.html