canvas 압축 그림 을 base 64 형식 으로 출력 파일 흐름 으로 변환

 <!--  canvas  -->
 <canvas id="canvas"></canvas>
 <!--        -->
 <img src="" class="preview">
 <img src="" class="preview">
 <!--    -->
 <img class="source" src="" style="display: none;">
 <img class="source" src="" style="display: none;">

// drawimage      
 // ctx.drawImage(Image,dx,dy);
 // ctx.drawImage(Image,dx,dy,dWidth,dHeight);
 // ctx.drawImage(Image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
 //images    ，             ，   htmlvideoElement htmlcanvasElement imagebitmap
 //todataurl canvas       ,          data url,   base64   
 //todataurl          ，            ：
 //type    .  3   ,   image/jpeg images/png image/webp,   image.png
 var canvas = document.getElementById('canvas');
 var source = document.getElementsByClassName('source');
 var preview = document.getElementsByClassName('preview');
 canvas.style.display = "none";
 window.onload = function() {
 //          
 for(var i = 0; i < preview.length; i++) {
  var width = source[i].width;
  var height = source[i].height;
  var context = canvas.getContext('2d');
  //sx    canvas        （  ） x     
  var sx = 0;
  //sy    canvas        （  ） y     
  var sy = 0;
  //swidth    canvas            ，         ，    sx         
  var sWidth = width;
  //sHeight                ，         ，    sy         
  var sHeight = height;
  //dx       canvas   x     
  var dx = 0;
  //dy         y      
  var dy = 0;
  //dwidth     canvas    
  //dHeight         
  var dWidth = width;
  var dHeight = height;
  var quality = 0.2;
  canvas.width = width;
  canvas.height = height;
  context.drawImage(source[i], sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
  var dataUrl = canvas.toDataURL('image/jpeg', quality);
  preview[i].src = dataUrl;
 }
 // console.info(dataUrl);
 };
 //    
 for(var i = 0; i < source.length; i++) {
 source[i].src = 'img/' + (i + 1) + '.jpg';
 }