joget拍照上传插件,不可选取相册

需求背景

用户工作完成之后需要将工具摆放完整并拍照上传交由审批人员审批,为了避免用户作弊, 不可以选择相册已经存在的图片

主要功能

1. 拍照上传
2. 添加水印
3. 图片压缩

整体思路

joget 文件上传功能内部已经封装完整, 不需要额外操作, 直接通过input type = file , 用户点击submit , joget会自动处理
限制相册功能通过 input 的 accept 属性和 capture 属性来控制
水印功能通过java自带的图像处理对象Graphics2D处理
压缩功能通过类库Thumbnails处理

核心代码

控制选择类型

accept属性表示接受哪种类型的文件,*代表所有的后缀, 如果指定为某种格式文件则填写为 accept=“image/gif, image/jpeg”;
capture属性表示打开哪种媒体程序,camera 表示相机 , camcorder 表示录录像机,microphone表示 录音机,当然, 在pc上是无效的;

控制在PC端无法选取文件

function getDevice() {
                var userAgentInfo = navigator.userAgent;
                console.log(userAgentInfo);
                var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
                var flag = false;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
                }
                return flag;
            }

以上代码为H5获取设备信息的方法, 主要通过 navigator 对象

添加水印

/**
     * @param logoText 要写入的文字
     * @param srcImgPath 源图片路径
     * @param newImagePath 新图片路径
     * @param degree 旋转角度
     * @param color  字体颜色
     * @param formaName 图片后缀
     * @param fontSize 水印大小 , 相对于图片的百分比,无需单位 例如 10;
     * @param waterMarkPosition 图片位置 ,固定值
     * @param marginWidth 水印的外边距 宽 , 当前单个字体的倍数 例如 0.1
     * @param marginHeight 水印的外边距 高 , 当前单个字体的倍数 例如 0.1
     */
    public static void markImageByText(String logoText, String srcImgPath,String newImagePath,Integer degree,Color color,String formaName,int fontSize,String waterMarkPosition,double marginWidth,double marginHeight) {
        InputStream is = null;
        OutputStream os = null;
        try {
            // 1、源图片
            java.awt.Image srcImg = ImageIO.read(new File(srcImgPath));
            BufferedImage buffImg = new BufferedImage(srcImg.getWidth(null),srcImg.getHeight(null), BufferedImage.TYPE_INT_RGB);
            // 2、得到画笔对象
            Graphics2D g = buffImg.createGraphics();
            // 3、设置对线段的锯齿状边缘处理
            g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BILINEAR);
            g.drawImage(srcImg.getScaledInstance(srcImg.getWidth(null), srcImg.getHeight(null), java.awt.Image.SCALE_SMOOTH), 0, 0, null);
            // 4、设置水印旋转
            if (null != degree) {
                g.rotate(Math.toRadians(degree),  buffImg.getWidth()/2,buffImg.getHeight() /2);
            }
            // 5、设置水印文字颜色
            g.setColor(color);


            //计算宽高 , 间距 , 文字位置
            double x = 0;
            double y = 0;
            int width = buffImg.getWidth();
            int height = buffImg.getHeight();

            if(fontSize<0 || fontSize> 10){
                fontSize = 2;
            }
            double realSize = width * fontSize /100;
            marginHeight = marginHeight*realSize;
            marginWidth = marginWidth*realSize;
            // 6、设置水印文字Font
            //读取工程目录下的字体文件,避免由于系统缺失字体导致的乱码
            InputStream resourceAsStream = WaterMarkUtil.class.getClassLoader().getResourceAsStream("simsun.ttf");
            Font font = Font.createFont(Font.TRUETYPE_FONT, resourceAsStream);
            font = font.deriveFont(Font.PLAIN, (float) realSize);
//            Font font = new Font("宋体", java.awt.Font.PLAIN, (int) realSize);
            g.setFont(font);

            // 7、设置水印文字透明度
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, 0.5f));
            // 8、第一参数->设置的内容，后面两个参数->文字在图片上的坐标位置(x,y)

            //获取文字的宽度和高度
            FontDesignMetrics metrics = FontDesignMetrics.getMetrics(font);
            int strWidth = metrics.stringWidth(logoText);
            int strHeight = metrics.getHeight();
//            x = width-strWidth;
//            y = height-strHeight;
            if("leftUp".equalsIgnoreCase(waterMarkPosition)){
                x = 0 + marginWidth;
                y = realSize + marginHeight;
            }else if("leftDown".equalsIgnoreCase(waterMarkPosition)){
                x = 0 + marginWidth;
                y = height - marginHeight;
            }else if("rightUp".equalsIgnoreCase(waterMarkPosition)){
                x = width-strWidth-marginWidth;
                y = realSize + marginHeight;
            }else{
                x = width-strWidth-marginWidth;
                y = height - marginHeight;
            }
            g.drawString(logoText,(int)x,(int)y);
            //覆盖整个图片
//            for (int i = 0; i 

以上代码修改于我从一篇博客中复制过来的代码 , 个人添加了水印位置的功能,大概捋清逻辑之后即可使用 , 关键部分都有注释,可在四个角落添加水印

图片亚索(手动滑稽)

public static void compress(File file,String compression){
        long compressNumber = Integer.parseInt(compression)*1000;
        float outputQuality = 0.75f;
        int count = 0;
        while (file.length()>compressNumber){
            try {
            //关键代码只有这一行
                Thumbnails.of(file.getPath()).scale(1f).outputQuality(outputQuality).toFile(file.getPath());
            } catch (IOException e) {
                e.printStackTrace();
            }
            outputQuality-=0.25f;
            count++;
            if(count >=3){
                break;
            }
        }
    }

官方文档:点我进入