Tạo ảnh pixel trên Google Sheets

1 Google Sheets Apps Script

Tạo ảnh pixel trên Google Sheets Chúng ta biết rằng, mỗi hình ảnh trên máy tính đều được cấu thành từ rất nhiều những điểm ảnh màu sắc khác nhau
Ở Google Sheets khi ta xem một ô là một điểm ảnh thì có thể tạo ra được những bức ảnh như thế nào nhỉ?
Trong bài viết này mình sẽ giới thiệu với mọi người ứng dụng Appscript tô màu các ô trên sheet để được một bức ảnh như ý Ấn vào ảnh bên dưới để sao chép file Sheet mẫu

Copy Sheet

Xây dựng tập lệnh
_File Code.gs



/*Tạo ảnh pixel trên Google Sheets - theza2.blogspot.com*/
function onOpen() {showSidebar();}

function showSidebar() {
  const html = HtmlService.createHtmlOutputFromFile("index")
    .setTitle("Pixel image")
    .setWidth(420);
  SpreadsheetApp.getUi().showSidebar(html);
}

function setI(dat,w,h,sizeC)
  {var ss=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
       dC=ss.getMaxColumns()-w,
       dR=ss.getMaxRows()-h;
   if(dC>0) ss.deleteColumns(1,dC);
   else if(dC<0) ss.insertColumns(1,-dC);
   if(dR>0) ss.deleteRows(1,dR);
   else if(dR<0) ss.insertRows(1,-dR);
   ss.setColumnWidths(1,w,sizeC);
   ss.setRowHeights(1,h,sizeC);
   ss.getRange(1,1,h,w).setBackgrounds(dat);
   }

_File index.html



<!--Tạo ảnh pixel trên Google Sheets - theza2.blogspot.com-->
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 10px;}
      table {width:100%}
      table tbody > tr:not(:last-child) > td:first-child {width:150px;min-width: 150px;}
      input[type=number] {
        width:90px;min-width: 90px;
        padding: 8px;
        margin: 5px 0;}
      button {
        width: 39%;
        padding: 10px;
        margin: 5px 1%;
        border: none;
        background-color: #00560f;
        color: white;
        font-size: 14px;
        cursor: pointer;
        font-weight: bold;}
      button:hover {background-color: #357AE8;}
      .loader {
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #00560f;
        width: 13px;
        height: 13px;
        -webkit-animation: spin 1s linear infinite; /* Safari */
        animation: spin 1s linear infinite;}
        @-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); }}
       @keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
    </style>
  </head>
  <body>
    <table><tbody>
     <tr><td>Giới hạn kích cỡ ảnh</td><td><input id="limitS" type="number" value=100></td></tr>
     <tr><td>Kích cỡ điểm ảnh</td><td><input id="sizeC" type="number" value=5></td></tr>
     <tr><td colspan=2><input id="imgF" type="file" accept="image/*"></td></tr>
    </tbody></table>
    <canvas id=canvas style="display:none"></canvas>
    <img onload="imgO()" id="img" src="" style="display:none;width:100%"/>
    <hr>
    <div style="text-align:-webkit-right;" id=act><button onclick="renderI()">Thực hiện</button></div>
    <i id=errS style="color:red"></i>
    <script>
      var file,arr=[],w,h;
      imgF.addEventListener('change', function (event) {
            file = event.target.files[0];arr=[];w=0;h=0;
            if (!file) {img.style.display='none';return;}
            var reader = new FileReader();
            reader.onload = function (e) {img.src=e.target.result;};
            reader.readAsDataURL(file);
        });
      
      function imgO(){
          if (!file) return;
          img.style.display='';
          var ctx = canvas.getContext('2d'),
              tl=limitS.value/Math.max(img.width,img.height);
              w=Math.floor(img.width*tl),h=Math.floor(img.height*tl);
          canvas.width=w;canvas.height=h;
          ctx.fillStyle="#FFF";ctx.fillRect(0,0,w,h);
          ctx.drawImage(img,0,0,w,h);
          var data = ctx.getImageData(0,0,w,h).data,c,r,i;
          for(r=0;r<h;r++)
              for(c=0;c<w;c++)
                {i=(c+r*w)*4;
                 if(!arr[r]) arr[r]=[];
                 arr[r][c]='rgb('+data.slice(i,i+3).join(',')+')';}
      }
        
      function renderI(){
        if(!w) {errS.innerHTML='Chưa chọn ảnh';return;}
        imgO();
        errS.innerHTML='';
        act.innerHTML='<p class=loader></p>';
        google.script.run
              .withFailureHandler(function (err){errS.innerHTML=err;act.innerHTML='<button onclick="renderI()">Thực hiện</button>';})
              .withSuccessHandler(function (){act.innerHTML='<button onclick="renderI()">Thực hiện</button>';})
              .setI(arr,w,h,sizeC.value);}
    </script>
  </body>
</html>