Learn Javascript
Canvas Draw
原始碼([Demo] Canvas Draw Image.html) 
<!DOCTYPE html>
<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>

大綱

兩套

paint in canvas

drawing demo1

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

原始碼([Demo] Canvas Draw Image step 1.html) 
<!DOCTYPE html>
<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>

drawing demo2

button: draw3 @import "img/0001.jpg" {width="300px" height="200px" title="my title" alt="my alt"} button: draw5 @import "img/0002.jpg" {width="300px" height="200px" title="my title" alt="my alt"} button: draw6 @import "img/0003.jpg" {width="300px" height="200px" title="my title" alt="my alt"}

原始碼([Demo] Canvas Draw Image step 2.html) 
<!DOCTYPE html>
<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>

drawing demo3

demo3

原始碼([Demo] Canvas Draw Image step 3.html) 
<!DOCTYPE html>
<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>