java和JS获取图片的宽和高

java和JS获取图片的宽和高

后台方法

jpg 和 png 格式

//    java获取图片的到达小，高度和宽度，jpg/png/
    public void imageSize() throws IOException {
//        方法一
        ImageIcon imageIcon = new ImageIcon("E:/ISiteImg/robot1.png");
        int width1 = imageIcon.getIconWidth();
        int height1 = imageIcon.getIconHeight();
        System.out.println("width1 = " + width1 + " - height1 =" + height1);   //        width1 = 519 - height1 =447
 
//        方法二
        File pic = new File("E:/ISiteImg/11.jpg");
        BufferedImage sourceImg = ImageIO.read(pic);
        int width = sourceImg.getWidth();
        int height = sourceImg.getHeight();
        System.out.println("width = " + width + " ; height = " + height);     //        width = 500 ; height = 304
    }

svg 格式

//    java 获取svg后缀的图片宽和高
    public void svgSize() throws IOException {
        File file = new File("E:/ISiteImg/2F PT_SIMPLE.svg");
        String parser = XMLResourceDescriptor.getXMLParserClassName();
        SAXSVGDocumentFactory factory = new SAXSVGDocumentFactory(parser);
        Document document = factory.createDocument(file.toURI().toString());   // import org.w3c.dom.Document;
        Element element = document.getDocumentElement();                       // import org.w3c.dom.Element;
        String viewBox = element.getAttribute("viewBox");
        System.out.println(" - viewBox = " + viewBox);    // - viewBox = 0 0 595.2 842
        String width = viewBox.split(" ")[2];  // splic(" ") 将字符串viewBox以空格分割为数组，下标为2代表宽，下标为3代表高
        String height = viewBox.split(" ")[3];
        int w = (int) Double.parseDouble(width);
        int h = (int) Double.parseDouble(height);
 
        System.out.println(" - -宽- " + w + "; - - 高-" + h);   //   - -宽- 595; - - 高-842
    }

前台获取方法 jpg 和 png 格式

在表单里面写好的上传组件，在回调函数 handleImageSuccess（） 中写入读取宽和高的方法

                 <el-form-item label="上传底图" prop="image">
                        <el-upload
                                ref="uploadRef"
                                class="avatar-uploader"
                                style="margin-left: 10px"
                                action="/api/imageUpload"
                                :auto-upload="true"
                                :show-file-list="false"
                                :on-success="handleImageSuccess"
                        >
                            <img v-if="form.data.image" :src="'/api'+ form.data.image" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

function handleImageSuccess(res) {
        if (res.code === 1200) {
            let img_url = '/api' + res.data.image;
            console.log("- -- 1- - ", img_url);
            let img = new Image();
            img.src = img_url;
            img.onload = function(){
                console.log(" -img1- ", img.width, img.height);
            };
 
        }
    }