zoukankan      html  css  js  c++  java
  • 图片上传预览(包含大小压缩)

    之前开发了一个图片上传的页面。但是由于主要是用于微信中,调用手机摄像头拍照,照片都是M为单位,太耗流量,于是进行修改。

    原本采用的直接是上传文件的方式,现改为使用canvas进行绘图,传递照片base64字符串。

    调整后的代码:

    页面HTML:

    <input type="file" capture="camera" accept="image/*" name="img1" id="img1" style="display:block;height:100%;100%;" /> 
    
    <img id="imgdata1" class="imgdata" style="display:inline-block">
    
    <canvas id="canvas1" style="display:none"></canvas>

    input 用于点击拍照或读取图像文件

    img 用于照片预览

    canvas 用于绘制图像

    input事件绑定:

    $("#img1").on('change', function(event) { 
        event.preventDefault(); 
        var file = $(this)[0].files[0]; 
        var ldot = file.name.lastIndexOf(".");
        var type = file.name.substring(ldot + 1);
        if (!type.match(/jpg|gif|png|bmp/i)){
                return alert("您上传的图片格式不正确,请重新选择!");
                };
           var  img = new Image();
           img.src = _URL.createObjectURL(file);
           img.onload = function () {
               var  picScale=this.width/this.height; /*picScale参数为原图宽*高,绘制图像时使用 防止图像拉伸变形 */
               var reader = new FileReader(); 
                reader.readAsDataURL(file); 
                reader.onload = function(e) { 
                createCanvas(this.result,picScale,1); 
    }     
            };  
    }); 

    绘制图像,预览显示:

    function createCanvas(src,picScale,index) {    /*因为我页面中有两张图片,所以增加了index参数进行判断*/
        var imagedata;
        var cav;
        if(index==1){
            imagedata=$("#imgdata1");
            cav="canvas1";
        }else{
            imagedata=$("#imgdata2");
            cav="canvas2";
        }
        /*console.log(picScale);*/
        var canvas = document.getElementById(cav); 
        var cxt = canvas.getContext('2d'); 
        canvas.width = 400*picScale; 
        canvas.height = 400; 
        var img = new Image(); 
        img.src = src; 
        img.onload = function() { 
        cxt.drawImage(img, 0, 0,400*picScale,400); /*画布绘制大小 显示将拉伸 固定高度,宽度用高度*比例*/
        imagedata.show().attr('src', canvas.toDataURL("image/jpeg", 0.9)); /*0.9为质量压缩比例 范围0-1*/
    } } 

    图像上传:

    function upload(){    var url = yourURL;
    
            $.ajax({ 
            url: url, 
            type: "POST", 
            data: { 
                "imgStr1": canvas1.toDataURL("image/jpeg", 0.9).split(',')[1],/*不包含头的图片base64字符串*/
                "imgStr2": canvas2.toDataURL("image/jpeg", 0.9).split(',')[1]
                }, 
            beforeSend: function() {
                    console.log('beforeSend');
                                   },
            success: function(result){ 
    if(result != ''){
                        var jsonObj = jQuery.parseJSON(result);
                        if(jsonObj.code == '0'){
                            var sim = parseFloat(jsonObj.data.sim)*100;
                            $("#simtext2").text(sim + "%");
                        }else{
                            alert(jsonObj.message);
                        }
                    }
                    console.log(result);
            } }); 
            
    } 
  • 相关阅读:
    HDOJ 1846 Brave Game
    并查集模板
    HDU 2102 A计划
    POJ 1426 Find The Multiple
    POJ 3278 Catch That Cow
    POJ 1321 棋盘问题
    CF 999 C.Alphabetic Removals
    CF 999 B. Reversing Encryption
    string的基础用法
    51nod 1267 4个数和为0
  • 原文地址:https://www.cnblogs.com/vayci/p/5758118.html
Copyright © 2011-2022 走看看