图片上传预览（包含大小压缩）

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

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

 

调整后的代码：

 

页面HTML：

<input type="file" capture="camera" accept="image/*" name="img1" id="img1" style="display:block;height:100%;width: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);
        } }); 
        
}