大綱

兩套

basic canvas

demo1

line 21: 這裡可以直接指定img.srcl,例如，img.src="img/0001.jpg"。但是這裡用了物件FileReader 的一個函數readAsDataURL()

<html>
<head>
<style>

</style>
<script>
 
</script>
</head>
<body>
<input type="file" id="browse" > 
<img id="img">
 
 <script>
 var reader = new FileReader();
 reader.onload = function(e) {  
  // e: progressEvent
  // e.target: FileReader Object
  // e.target.result就是圖片的base64位址資訊(result of readAsDataURL)
  
  img.src = e.target.result;
};
browse.addEventListener('change', function (event) {
    reader.readAsDataURL(event.target.files[0]);
});

 </script>
</body>

</html>

demo2

<html>
<head>
<style>
 canvas{
  border: solid red;

 }
 img{
  border:solid green;
 }
</style>
<script>

function imgDetail(){
  detail.innerHTML="寬度 " +img.naturalWidth + " 高度 " + img.naturalHeight;
}
 
 function draw3() { 
   var context = canvas.getContext('2d');
   canvas.width = 400;  //注意：利用css 分別Width,Height為400px,300px 會無法正確縮放。
   canvas.height = 300; 
   
	context.drawImage(img,parseInt(cLeft.value),parseInt(cTop.value));
}

function draw5() { //autoscale to canvas size

   var context = canvas.getContext('2d');
   canvas.width = 400;  //注意：利用css 分別Width,Height為400px,300px 會無法正確縮放。
   canvas.height = 300; 
   
	context.drawImage(img,parseInt(cLeft.value),parseInt(cTop.value),parseInt(cWidth.value),parseInt(cHeight.value));
}
function draw9() { 
 
   var context = canvas.getContext('2d');
   canvas.width = 400;  //注意：利用css 分別Width,Height為400px,300px 會無法正確縮放。
   canvas.height = 300; 
  
	context.drawImage(img,parseInt(sLeft.value),parseInt(sTop.value),parseInt(sWidth.value),parseInt(sHeight.value),parseInt(cLeft.value),parseInt(cTop.value),parseInt(cWidth.value),parseInt(cHeight.value));
	
}
</script>
</head>
<body>
<input type="file" id="browse" > 
<br>
<img id="img" Width="200px" Height="100px" onload="imgDetail()">
<div id="detail"></div>
<hr>
<br>
<canvas id="canvas"></canvas>
<br>
 canvas Left<input type="text" id="cLeft" value="0"> 
 <br>
 canvas Top<input type="text" id="cTop" value="0">
 <br>
 canvas Width<input type="text" id="cWidth" value="400">
 <br>
 canvas Height<input type="text" id="cHeight" value="300">
 <br>
 Image Left<input type="text" id="sLeft" value="0"> 
 <br>
 Image Top<input type="text" id="sTop" value="0">
 <br>
 Image Width<input type="text" id="sWidth" value="200">
 <br>
 Image Height<input type="text" id="sHeight" value="200">
 <br>
 <input type="button" value="draw3" onclick="draw3()">
 <input type="button" value="draw5" onclick="draw5()">
 <input type="button" value="draw9" onclick="draw9()">
 
<br>
 
<br>

 <script>
 var reader = new FileReader();
 reader.onload = function(e) {  
  // e: progressEvent
  // e.target: FileReader Object
  // e.target.result就是圖片的base64位址資訊(result of readAsDataURL)
  
  img.src = e.target.result;
  //draw2Canvas(); //放在這裡，由於非同步問題，有時候沒有圖形，另外放在按鈕(label:draw2Canvas)。
};
browse.addEventListener('change', function (event) {
    reader.readAsDataURL(event.target.files[0]);
});

 </script>
</body>

</html>
my alt my alt my alt

demo3

demo3

<html>
<head>
<style>
 canvas{
  border: solid red;

 }
 img{
  border:solid green;
 }
</style>
<script>

function imgDetail(){
  detail.innerHTML="寬度 " +img.naturalWidth + " 高度 " + img.naturalHeight;
}
function downloadURI(uri, name) {
//demo:
//downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

function downIcon(){
  var alist=document.getElementsByTagName('canvas');
  var names=[  'drawable-ldpi-icon', 'drawable-mdpi-icon',  'drawable-hdpi-icon',  'drawable-xhdpi-icon', 'drawable-xxhdpi-icon.png',  'drawable-xxxhdpi-icon.png']

  var durl;
  
  for (i=0;i<alist.length;i++){
    durl=alist[i].toDataURL("image/png");
	downloadURI(durl,names[i]);
  }
   
   
}
 
 function draw2Canvas(aCanvas,width,height) { 
   var context = aCanvas.getContext('2d');
   aCanvas.width = width;  //注意：利用css 分別Width,Height為400px,300px 會無法正確縮放。
   aCanvas.height = height; 
   
	context.drawImage(img,0,0,width,height);
}
function toIcon(){
  var alist=document.getElementsByTagName('canvas');
  var rects=[[36,36],[48,48],[72,72],[96,96],[144,144],[192,192]];
  var ctx;
  for (i=0;i<alist.length;i++){
    
	draw2Canvas(alist[i],rects[i][0],rects[i][1]);
  }
   
   

}
 
</script>
</head>
<body>
<input type="file" id="browse" > 
<br>
<img id="img" Width="200px" Height="100px" onload="imgDetail()">
<div id="detail"></div>
<hr>
<br>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
 <br>
 <input type="button" value="轉換" onclick="toIcon()">
 <br>
  <input type="button" value="下載" onclick="downIcon()">
<br>
 


 <script>
 var reader = new FileReader();
 reader.onload = function(e) {  
  // e: progressEvent
  // e.target: FileReader Object
  // e.target.result就是圖片的base64位址資訊(result of readAsDataURL)
  
  img.src = e.target.result;
  //draw2Canvas(); //放在這裡，由於非同步問題，有時候沒有圖形，另外放在按鈕(label:draw2Canvas)。
};
browse.addEventListener('change', function (event) {
    reader.readAsDataURL(event.target.files[0]);
});

 </script>
</body>

</html>

paint in canvas

drawing demo1


<html>
<head>
    <title>HTML5 Canvas塗鴉板</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js">
    </script>
    <style>
        body,input { font-size: 9pt; }
        #dCanvas,#dLine { clear: both; }
        .option
        {
            float: left; width: 20px; height: 20px; border: 2px solid #cccccc;
            margin-right: 4px; margin-bottom: 4px;
        }
        .active { border: 2px solid black; }
        .lw { text-align: center; vertical-align: middle; }
        img.output { border: 1px solid green; }
        #cSketchPad { cursor: arrow; }
    </style>
 
</head>
<body>
<div id="dPallete"></div>
<div id="dLine"></div>
<div id="dCanvas">
<canvas id="aPad" width="300" height="300" style="border: 2px solid gray" />
</div>
<input type="button" id="bGenImage" value="Generate Image" />
<div id="dOutput"></div>

   <script>
            var aPad = document.getElementById("aPad");
            var ctx = aPad.getContext("2d");
            ctx.lineCap = "round";
            ctx.fillStyle = "white"; //白底
            ctx.fillRect(0, 0, aPad.width, aPad.height);
            var drawMode = false;
            //canvas點選、移動、放開按鍵事件時進行繪圖動作
            aPad.onmousedown=function (e) {
                ctx.beginPath();
                ctx.strokeStyle = "red";//p_color;
                ctx.lineWidth = 2;//p_width;
                //ctx.moveTo(e.pageX - aPad.position().left, e.pageY - aPad.position().top);
				offset = aPad.getBoundingClientRect();
				ctx.moveTo(e.pageX-offset.left,e.pageY-offset.top);
                drawMode = true;
				 
            }
            aPad.onmousemove=function (e) {
                if (drawMode) {
                    //ctx.lineTo(e.pageX - aPad.position().left, e.pageY - aPad.position().top);
					offset = aPad.getBoundingClientRect();
				    ctx.lineTo(e.pageX-offset.left,e.pageY-offset.top);
                    ctx.stroke();
					 
                }
            }
            aPad.onmouseup=function (e) {
                drawMode = false;
            }
    </script>

</body>
</html>

drawing demo2


<html>
<head>
    <title>HTML5 Canvas塗鴉板</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js">
    </script>
    <style>
        body,input { font-size: 9pt; }
        #dCanvas,#dLine { clear: both; }
        .option
        {
            float: left; width: 20px; height: 20px; border: 2px solid #cccccc;
            margin-right: 4px; margin-bottom: 4px;
        }
        .active { border: 2px solid black; }
        .lw { text-align: center; vertical-align: middle; }
        img.output { border: 1px solid green; }
        #cSketchPad { cursor: arrow; }
    </style>
 
</head>
<body>
<div id="dPallete"></div>
<div id="dLine"></div>
<div id="dCanvas">
<canvas id="aPad" width="300" height="300" style="border: 2px solid gray" />
</div>
<input type="button" id="bGenImage" value="Generate Image" />
<div id="dOutput"></div>

   <script>
            //prepare color
            var colors =
            "red;orange;yellow;green;blue;indigo;purple;black;white".split(';');
            var sb = [];
			colors.forEach(function(e){
			    sb.push("<div class='option' style='background-color:" + e + "'></div>");
			});	
			document.getElementById("dPallete").innerHTML= sb.join("\n");
           var  p_color;
           var clrs = document.getElementById("dPallete").getElementsByClassName("option");
           for (i=0;i<clrs.length-1;i++){
		     //onclick改變顏色
		     clrs[i].onclick= function(){ p_color= this.style.backgroundColor;};
           };		   
        
            //main work
            var aPad = document.getElementById("aPad");
            var ctx = aPad.getContext("2d");
            ctx.lineCap = "round";
            ctx.fillStyle = "white"; //白底
            ctx.fillRect(0, 0, aPad.width, aPad.height);
            var drawMode = false;
            //canvas點選、移動、放開按鍵事件時進行繪圖動作
            aPad.onmousedown=function (e) {
                ctx.beginPath();
                ctx.strokeStyle =  p_color;
                ctx.lineWidth = 2;//p_width;
                //ctx.moveTo(e.pageX - aPad.position().left, e.pageY - aPad.position().top);
				offset = aPad.getBoundingClientRect();
				ctx.moveTo(e.pageX-offset.left,e.pageY-offset.top);
                drawMode = true;
				 
            }
            aPad.onmousemove=function (e) {
                if (drawMode) {
                    //ctx.lineTo(e.pageX - aPad.position().left, e.pageY - aPad.position().top);
					offset = aPad.getBoundingClientRect();
				    ctx.lineTo(e.pageX-offset.left,e.pageY-offset.top);
                    ctx.stroke();
					 
                }
            }
            aPad.onmouseup=function (e) {
                drawMode = false;
            }
    </script>

</body>
</html>

drawing demo3


<html>
<head>
    <title>HTML5 Canvas塗鴉板</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js">
    </script>
    <style>
        body,input { font-size: 9pt; }
        #dCanvas,#dLine { clear: both; }
        .option
        {
            float: left; width: 20px; height: 20px; border: 2px solid #cccccc;
            margin-right: 4px; margin-bottom: 4px;
        }
        .active { border: 2px solid black; }
        .lw { text-align: center; vertical-align: middle; }
        img.output { border: 1px solid green; }
        #cSketchPad { cursor: arrow; }
    </style>
 
</head>
<body>
<div id="dPallete"></div>
<div id="dLine"></div>
<div id="dCanvas">
<canvas id="aPad" width="300" height="300" style="border: 2px solid gray" />
</div>
<input type="button" id="bGenImage" value="Generate Image" />
<div id="dOutput"></div>

   <script>
            //prepare color
            var colors =
            "red;orange;yellow;green;blue;indigo;purple;black;white".split(';');
            var sb = [];
			colors.forEach(function(e){
			    sb.push("<div class='option' style='background-color:" + e + "'></div>");
			});	
			document.getElementById("dPallete").innerHTML= sb.join("\n");
           var  p_color;
           var clrs = document.getElementById("dPallete").getElementsByClassName("option");
			
			//prepare width
            sb = [];
            for (var i = 1; i <= 9; i++)
                sb.push("<div class='option lw'>" +
         "<div style='margin-top:#px;margin-left:#px;width:%px;height:%px'></div></div>"
                .replace(/%/g, i).replace(/#/g, 10 - i / 2));
           document.getElementById("dLine").innerHTML= sb.join("\n");
		   var p_width;
           var lws = document.getElementById("dLine").getElementsByClassName("option");
				 //lws HTMLCollection, lws[0]=lws.item(0)
			
           for (i=0;i<clrs.length-1;i++){
		     //onclick改變顏色
		     clrs[i].onclick= function(){ 
			   p_color= this.style.backgroundColor;
			   //$lws.children("div").css("background-color", p_color);
			   for (var j=0;j<lws.length-1;j++){
			     //lws[j].children[0].css("background-color", p_color);
				 lws[j].children[0].style["background-color"]=p_color;
			   }
			 };
           };	
		   clrs[0].click();
           for (i=0;i<lws.length-1;i++){
		     //onclick改變顏色
		     lws[i].onclick= function(){ 
			    p_width= this.children[0].style["width"].replace("px", "");
			    };	
           };		   
        
            //main work
            var aPad = document.getElementById("aPad");
            var ctx = aPad.getContext("2d");
            ctx.lineCap = "round";
            ctx.fillStyle = "white"; //白底
            ctx.fillRect(0, 0, aPad.width, aPad.height);
            var drawMode = false;
            //canvas點選、移動、放開按鍵事件時進行繪圖動作
            aPad.onmousedown=function (e) {
                ctx.beginPath();
                ctx.strokeStyle =  p_color;
                ctx.lineWidth = p_width;
                //ctx.moveTo(e.pageX - aPad.position().left, e.pageY - aPad.position().top);
				offset = aPad.getBoundingClientRect();//canvas 的左上，右下
				ctx.moveTo(e.pageX-offset.left,e.pageY-offset.top);
                drawMode = true;
				 
            }
            aPad.onmousemove=function (e) {
                if (drawMode) {
                    //ctx.lineTo(e.pageX - aPad.position().left, e.pageY - aPad.position().top);
					offset = aPad.getBoundingClientRect();
				    ctx.lineTo(e.pageX-offset.left,e.pageY-offset.top);
                    ctx.stroke();
					 
                }
            }
            aPad.onmouseup=function (e) {
                drawMode = false;
            }
			// 產生image
           //利用.toDataqURL()將繪圖結果轉成圖檔
		    document.getElementById("bGenImage").onclick=function(){
			 document.getElementById("dOutput").innerHTML=
			   '<img src="' +aPad.toDataURL() +'"/>';
			};
 		
    </script>

</body>
</html>