這里講到兩個(gè)關(guān)鍵問(wèn)題點(diǎn)：

1、上傳圖片，在前端轉為base64格式，用到的是FileReader()函數；

2、canvas畫(huà)圖。

直接上代碼：

<input type="file" style="display: none" id="file" onClick="up()">
<canvas id="canvas"></canvas>
<script type="text/javascript">
function up(){
var reader = new FileReader();
var file = $(this)[0].files[0];
var imgUrlBase64;
if (file) {
reader.readAsDataURL(file);//將文件以Data URL形式讀入頁(yè)面  
reader.onload = function (e) {
//這就是base64格式圖片數據
imgUrlBase64= e.target.result; 
//imgUrlBase64= imgUrlBase64.substring(imgUrlBase64.indexOf(",") + 1);//截取base64碼部分（是否有必要，看需求）
// canvas
//獲取canvas元素
var cvs = document.getElementById("canvas");
//創(chuàng  )建image對象
var imgObj = new Image();
imgObj.src = imgUrlBase64;
//待圖片加載完后，將其顯示在canvas上 
imgObj.onload = function(){
var ctx = cvs.getContext('2d');
ctx.clearRect(0,0,imgObj.width,imgObj.height);
ctx.drawImage(this, 0, 0);
//this即是imgObj,保持圖片的原始大小
//ctx.drawImage(this, 0, 0,1024,768);//改變圖片的大小到1024*768 
}; 
}
}
}
</script>