用html5的canvas生成圖片並保存到后台






div#a{

width:1105px;
height:500px;
margin:0 auto;
border:0px solid;

}

<div id ="a">
<canvas id="canvas" width="1105" height="500"></canvas>
</div>
<div id="down">
<center>
<button onclick="restuya()">清除</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="saveTu()" id="btn">保存</button>
</center>
</div>



<script type="text/javascript"> 
document.getElementById("btn").disabled=true;
// 獲取 canvas 對象  
var canvas = document.getElementById('canvas');  
// 獲取繪圖環境  
var ctx = canvas.getContext('2d');  


var last = null;  


// 文件對象  
var filedata = null;  


// 鼠標按下  
canvas.onmousedown = function(){ 
    // 在鼠標按下后觸發鼠標移動事件  
    canvas.onmousemove = move;  
    document.getElementById("btn").disabled=false;
}  


// 鼠標抬起取消鼠標移動的事件  
canvas.onmouseup = function(){  
    canvas.onmousemove = null;    
    last = null;  
}  


// 鼠標移出畫布時 移動事件也要取消。  
canvas.onmouseout = function(){  
    canvas.onmousemove = null;  
    last = null;  
}  


// 鼠標移動函數  
function move(e){  
    // console.log(e.offsetX);  
    if(last != null){  
        ctx.beginPath();  
        ctx.moveTo(last[0],last[1]);  
        ctx.lineTo(e.offsetX,e.offsetY);  
        ctx.stroke();  
    }         
    // 第一次觸發這個函數,只做一件事,把當前 鼠標的 x , y 的位置記錄下來  
    // 做下一次 線段的 起始點。  
    last = [e.offsetX,e.offsetY];  


}  


// 重新在畫  
function restuya(){  
document.getElementById("btn").disabled=true;
    ctx.clearRect(0,0,canvas.width,canvas.height);  
    drawImg(filedata);  
    
}  


// 繪制圖片  
function drawImg(filedata){  


    var readFile = new FileReader();  


    readFile.readAsDataURL(filedata);  


    // 圖片讀取成功  
    readFile.onload = function(){  


        var Img = new Image();  
        Img.src = this.result;  


        Img.onload = function(){  
            // 根據 圖片的 寬高 來 設置canvas 寬和高   
            canvas.width = Img.width;  
            canvas.height = Img.height;  
            ctx.drawImage(Img,0,0);  
        }  
    }  
}  


function saveTu(){
var saveImage = canvas.toDataURL('image/png');
var b64 = saveImage.substring(22);


$.ajax({
url: "http://localhost:8080/jiemian/saveImg",
type:'post',
data: { pp: b64},
success:function ()  
        {  
        alert('保存成功');  
        }  
});  
}



后台部分


public class savePictureServlet extends HttpServlet{


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}


@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {


String imageDataUrl = req.getParameter("pp");
        BASE64Decoder decoder = new BASE64Decoder();    
        byte[] b = decoder.decodeBuffer(imageDataUrl);    
        ByteArrayInputStream bais = new ByteArrayInputStream(b);
        BufferedImage bi1 = ImageIO.read(bais);
        File w2 = new File("D://test.png");
        ImageIO.write(bi1, "png", w2);
}
}


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com