h5 canvas 图片上传操作

 

最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等
这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化

html:

1 <pre name="code" class="brush: html;" rows="15" cols="300">
2 <input type="file" name="" accept="image/gif, image/jpeg" id="upload">
3 <canvas id="showimg" style="border:1px solid #aaa;"></canvas>
4 <p>移动:</p>     
5 <input type="range" min="0" max="2" id="move" step="0.01" value="1" class="range-control" oninput="translateall()"/><br/>
6 <button id="crop">剪裁输出</button>
7 <img id="img" src="" style="border:1px solid #aaa;">

 

 

js:初始代码

var img = new Image();
var can = document.getElementById('showimg');
var ctx = can.getContext("2d");
can.width = 500;
can.height = 400;
var fictitious_imgwidth,fictitious_imgheight,flag;
var distance_x = 0;
var distance_y = 0;
var orign_x,orign_y//鼠标点击时的坐标
var present_x,present_y//记录图片做上角的坐标
var substitute_x,substitute_y//暂时记录图片左上角坐标
ctx.fillStyle = "#aaa";   
ctx.fillRect(0,0,500,400); 
ctx.beginPath();
ctx.moveTo(100,100);   
ctx.lineTo(400,100);
ctx.lineTo(400,300);
ctx.lineTo(100,300); 
ctx.lineTo(100,100); 
ctx.lineWidth = 3;
ctx.strokeStyle = '#333'
ctx.stroke();
ctx.clip();
ctx.closePath();
ctx.clearRect(0, 0, can.width, can.height);   
$('#upload').change(function(){
    console.log('this is runing')
    ctx.clearRect(0, 0, can.width, can.height); 
    
    img.onload = function(){
        fictitious_imgwidth = img.width;
        fictitious_imgheight = img.height;
        present_x = can.width*0.5-img.width*0.5;
        present_y = can.height*0.5-img.height*0.5;
        ctx.drawImage(img,present_x,present_y,img.width,img.height);
    }
    img.src = getFileUrl('upload');
    
})
function translateall(){
    var val = document.getElementById("move").value;
    reprint(val)
}
function reprint(scale){
    ctx.clearRect(0, 0, can.width, can.height);
    fictitious_imgwidth = img.width*scale;
    fictitious_imgheight = img.height*scale;
    check_present();
    ctx.drawImage(img,present_x,present_y,fictitious_imgwidth,fictitious_imgheight)
}
function getFileUrl(sourceId) { 
    var url; 
    if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
        url = document.getElementById(sourceId).value; 
    } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
    } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
    }
    return url; 
} 
$('#showimg').mousedown(function(e){
    console.log('mousedown is running')
    orign_x = e.offsetX;
    orign_y = e.offsetY;
    judgment_isinimg(e);

}).mousemove(function(e){
    if(flag){
        distance_x = e.offsetX - orign_x;
        distance_y = e.offsetY - orign_y;
        ctx.clearRect(0, 0, can.width, can.height); 
        substitute_x = present_x + distance_x;
        substitute_y = present_y + distance_y;
        ctx.drawImage(img,substitute_x,substitute_y,fictitious_imgwidth,fictitious_imgheight);
        
    }
}).mouseleave(function(){
    flag = false
    present_x = substitute_x;
    present_y =substitute_y;
}).mouseup(function(){
    flag = false
    present_x = substitute_x;
    present_y =substitute_y;
})

function judgment_isinimg(e){
    var ll = present_x
    var lt = present_y
    var rl = present_x+fictitious_imgwidth
    var rt = present_y+fictitious_imgheight
    

    var x=event.clientX-can.getBoundingClientRect().left;
    var y=event.clientY-can.getBoundingClientRect().top;

    if(ll < x && x < rl && lt < y && y < rt){
        flag = true;
    }else{
        flag = false;
    }
}

function check_present(){
    if(typeof present_x == 'undefined' || typeof present_y == 'undefined'){
        present_x = can.width*0.5-fictitious_imgwidth*0.5;
        present_y = can.height*0.5-fictitious_imgheight*0.5;
    }
}

$('#crop').click(function(){
    crop_canvas = document.createElement('canvas');
    crop_canvas.width = 300;  
    crop_canvas.height = 200;
    crop_ctx =crop_canvas.getContext('2d')
    crop_ctx.fillStyle = "#fff";
    crop_ctx.fillRect(0,0,300,200);
    check_present();
    crop_ctx.drawImage(img,Number(present_x)-100,Number(present_y)-100,fictitious_imgwidth,fictitious_imgheight);
    var fullQuality = crop_canvas.toDataURL('image/jpeg', 1.0);
    $('#img').attr('src',fullQuality);
})

View Code