জাভাস্ক্রিপ্ট - ফাইল আপলোড; চিত্রটির স্বচ্ছ পটভূমি আছে কিনা তা পরীক্ষা করুন

Question

আমি চিত্রের স্বচ্ছতা যাচাই করতে চাই এবং চিত্রের পটভূমি স্বচ্ছ না হলে একটি ত্রুটি বার্তা প্রদর্শন করতে চাই। function hasAlpha(file)ফাইলটি একটি স্বচ্ছ পটভূমি আছে তা যাচাই করার জন্য আমার আছে তবে আমি কীভাবে এটি function uploadFile(file)ইতিমধ্যে ফাইলের আকার যাচাই করে ফাংশনটি দিয়ে কীভাবে পাস করব তা নিশ্চিত নই ।

আমি মনে করি আমি ফাইলের আকারের ifবিবৃতিটির ভিতরে নকল করতে পারি if (xhr.upload) {}এবং আপলোড করা চিত্রটি স্বচ্ছ কিনা তা যাচাই করতে পারি তবে কীভাবে function hasAlpha(file)বাকি কোডের সাথে অন্তর্ভুক্ত করা যায় তা আমি নিশ্চিত নই ।

// File Upload
//
function ekUpload() {
  function Init() {
    console.log("Upload Initialised");

    var fileSelect = document.getElementById("file-upload"),
      fileDrag = document.getElementById("file-drag"),
      submitButton = document.getElementById("submit-button");

    fileSelect.addEventListener("change", fileSelectHandler, false);

    // Is XHR2 available?
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
      // File Drop
      fileDrag.addEventListener("dragover", fileDragHover, false);
      fileDrag.addEventListener("dragleave", fileDragHover, false);
      fileDrag.addEventListener("drop", fileSelectHandler, false);
    }
  }

  function fileDragHover(e) {
    var fileDrag = document.getElementById("file-drag");

    e.stopPropagation();
    e.preventDefault();

    fileDrag.className =
      e.type === "dragover" ? "hover" : "modal-body file-upload";
  }

  function fileSelectHandler(e) {
    // Fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    // Cancel event and hover styling
    fileDragHover(e);

    // Process all File objects
    for (var i = 0, f;
      (f = files[i]); i++) {
      parseFile(f);
      uploadFile(f);
    }
  }

  // Output
  function output(msg) {
    // Response
    var m = document.getElementById("messages");
    m.innerHTML = msg;
  }

  function hasAlpha(file) {
    var canvas = file.getElementById("file-image");
    var ctx = canvas.getContext("2d");
    var data = file.getImageData(0, 0, canvas.width, canvas.height).data,
      hasAlphaPixels = false;
    for (var i = 3, n = data.length; i < n; i += 4) {
      if (data[i] < 255) {
        hasAlphaPixels = true;
        break;
      }
    }
    return hasAlphaPixels;
  }

  function parseFile(file) {
    console.log(file.name);
    output("<strong>" + encodeURI(file.name) + "</strong>");

    // var fileType = file.type;
    // console.log(fileType);
    var imageName = file.name;

    var isGood = /\.(?=svg|jpg|png|jpeg)/gi.test(imageName);
    if (isGood) {
      document.getElementById("start").classList.add("hidden");
      document.getElementById("response").classList.remove("hidden");
      document.getElementById("notimage").classList.add("hidden");
      // Thumbnail Preview
      document.getElementById("file-image").classList.remove("hidden");
      document.getElementById("file-image").src = URL.createObjectURL(file);
    } else {
      document.getElementById("file-image").classList.add("hidden");
      document.getElementById("notimage").classList.remove("hidden");
      document.getElementById("start").classList.remove("hidden");
      document.getElementById("response").classList.add("hidden");
      document.getElementById("file-upload-form").reset();
    }
  }

  function uploadFile(file) {
    var xhr = new XMLHttpRequest(),
      fileInput = document.getElementById("class-roster-file"),
      fileSizeLimit = 1024; // In MB

    if (xhr.upload) {
      // Check if file is less than x MB
      if (file.size <= fileSizeLimit * 1024 * 1024) {
        // File received / failed
        xhr.onreadystatechange = function(e) {
          if (xhr.readyState == 4) {
            // Everything is good!
            // document.location.reload(true);
          }
        };

        // Start upload
        xhr.open(
          "POST",
          document.getElementById("file-upload-form").action,
          true
        );
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(file);
      } else {
        output("Please upload a smaller file (< " + fileSizeLimit + " MB).");
      }
    }
  }

  // Check for the various File API support.
  if (window.File && window.FileList && window.FileReader) {
    Init();
  } else {
    document.getElementById("file-drag").style.display = "none";
  }
}
ekUpload();

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  border: 1px solid;
  cursor: pointer;
  height: 90px;
}

img {
  border: 1px solid;
  height: 60px;
  width: 60px;
}

.uploader input[type="file"],
.hidden {
  display: none;
}

<!-- Upload  -->
<form id="file-upload-form" class="uploader">
  <input id="file-upload" type="file" name="fileUpload" accept="image/*" />
  <label for="file-upload" id="file-drag">
    <img id="file-image" src="#" alt="Preview" class="hidden">
    <div id="start">
      <i class="fa fa-download" aria-hidden="true"></i>
      <div>Select a file or drag here</div>
      <div id="notimage" class="hidden">Please select an image</div>
    </div>
    <div id="response" class="hidden">
      <div id="messages"></div>
    </div>
  </label>
</form>
<div class="error hidden">Your logo must have a transparent background. Please set RBGa

Comments

আপনি কেন এটি একটি অনুরোধ শিরোনাম বা ক্যোয়ারস্ট্রিং হিসাবে সেট করবেন না?

— মিঃ জ্যাচ

আমি কীভাবে করব তা নিশ্চিত নই। আপনি কি একটি স্নিপেটে প্রদর্শন করতে সক্ষম হবেন?

— কাইল আন্ডারহিল

আপনার জানা উচিত যে আপনি যদি পোস্ট করেছেন কোডটি বুঝতে পারেন।

— মিঃ জাচ

Answer 1

আমি আপনার hasAlpha()ফাংশনটি পরিবর্তন / সংশোধন করেছি । এটি এমন প্রতিশ্রুতি দেয় যা চিত্র লোড ইভেন্টের সমাধান করে বা চিত্র ত্রুটির ইভেন্টে প্রত্যাখ্যান করে। আমি ততক্ষণে লুকানো <canvas>উপাদান যুক্ত করেছি, যা এই ফাংশন দ্বারা ব্যবহৃত হয়। আমি fileSelectHandler()ফাংশনে স্বচ্ছতা যাচাই যুক্ত করেছি , প্রয়োজনে এটিকে অন্য জায়গায় সরিয়ে নিয়েছি ।

কোড:

// File Upload
//
function ekUpload() {
  function Init() {
    console.log("Upload Initialised");

    var fileSelect = document.getElementById("file-upload"),
      fileDrag = document.getElementById("file-drag"),
      submitButton = document.getElementById("submit-button");

    fileSelect.addEventListener("change", fileSelectHandler, false);

    // Is XHR2 available?
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
      // File Drop
      fileDrag.addEventListener("dragover", fileDragHover, false);
      fileDrag.addEventListener("dragleave", fileDragHover, false);
      fileDrag.addEventListener("drop", fileSelectHandler, false);
    }
  }

  function fileDragHover(e) {
    var fileDrag = document.getElementById("file-drag");

    e.stopPropagation();
    e.preventDefault();

    fileDrag.className =
      e.type === "dragover" ? "hover" : "modal-body file-upload";
  }

  async function fileSelectHandler(e) {
    // Fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    // Cancel event and hover styling
    fileDragHover(e);

    // Process all File objects
    for (let i = 0; i < files.length; i++) {
      const f = files[i];
      if (await hasAlpha(f)) {
        console.log('Selected image is transparent');
        parseFile(f);
        uploadFile(f);
      }
      else {
        console.log('Selected image is not transparent');
        document.querySelector('#response').classList.remove('hidden');
        document.querySelector('#file-image').classList.add('hidden');
        output('<strong class="warning">Image background is not transparent</strong>');
      }
    }
  }

  // Output
  function output(msg) {
    // Response
    var m = document.getElementById("messages");
    m.innerHTML = msg;
  }

  function hasAlpha(file) {
    return new Promise((resolve, reject) => {
      let hasAlpha = false;
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext('2d');
    
      const img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onerror = reject;
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
      
        ctx.drawImage(img, 0, 0);
        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
      
        for (let j = 0; j < imgData.length; j += 4) {
          if (imgData[j + 3] < 255) {
            hasAlpha = true;
            break;
          }
        }
        resolve(hasAlpha);
      };
      img.src = URL.createObjectURL(file);
    });
  }

  function parseFile(file) {
    console.log(file.name);
    output("<strong>" + encodeURI(file.name) + "</strong>");

    // var fileType = file.type;
    // console.log(fileType);
    var imageName = file.name;

    var isGood = /\.(?=svg|jpg|png|jpeg)/gi.test(imageName);
    if (isGood) {
      document.getElementById("start").classList.add("hidden");
      document.getElementById("response").classList.remove("hidden");
      document.getElementById("notimage").classList.add("hidden");
      // Thumbnail Preview
      document.getElementById("file-image").classList.remove("hidden");
      document.getElementById("file-image").src = URL.createObjectURL(file);
    } else {
      document.getElementById("file-image").classList.add("hidden");
      document.getElementById("notimage").classList.remove("hidden");
      document.getElementById("start").classList.remove("hidden");
      document.getElementById("response").classList.add("hidden");
      document.getElementById("file-upload-form").reset();
    }
  }

  function uploadFile(file) {
    var xhr = new XMLHttpRequest(),
      fileInput = document.getElementById("class-roster-file"),
      fileSizeLimit = 1024; // In MB

    if (xhr.upload) {
      // Check if file is less than x MB
      if (file.size <= fileSizeLimit * 1024 * 1024) {
        // File received / failed
        xhr.onreadystatechange = function(e) {
          if (xhr.readyState == 4) {
            // Everything is good!
            // document.location.reload(true);
          }
        };

        // Start upload
        xhr.open(
          "POST",
          document.getElementById("file-upload-form").action,
          true
        );
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(file);
      } else {
        output("Please upload a smaller file (< " + fileSizeLimit + " MB).");
      }
    }
  }

  // Check for the various File API support.
  if (window.File && window.FileList && window.FileReader) {
    Init();
  } else {
    document.getElementById("file-drag").style.display = "none";
  }
}
ekUpload();

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  border: 1px solid;
  cursor: pointer;
  height: 90px;
}

img {
  border: 1px solid;
  height: 60px;
  width: 60px;
}

.uploader input[type="file"],
.hidden {
  display: none;
}

.warning {
  color: red;
  font-weight: bold;
}
canvas {
  position: absolute;
  top: -2000px;
}

<!-- Upload  -->
<form id="file-upload-form" class="uploader">
  <input id="file-upload" type="file" name="fileUpload" accept="image/*" />
  <label for="file-upload" id="file-drag">
    <img id="file-image" src="#" alt="Preview" class="hidden">
    <div id="start">
      <i class="fa fa-download" aria-hidden="true"></i>
      <div>Select a file or drag here</div>
      <div id="notimage" class="hidden">Please select an image</div>
    </div>
    <div id="response" class="hidden">
      <div id="messages"></div>
    </div>
  </label>
</form>
<div class="error hidden">Your logo must have a transparent background. Please set RBGa</div>
<canvas></canvas>

Comments

এসভিজির canvasজন্য অনুমতি দেয়? আমি 'ক্যানভাস রেন্ডারিং কনটেক্সট 2 ডি'-তে নিম্নলিখিত ত্রুটি' গেটআইজেড ডেটা 'পেয়েছি: ক্যানভাসটি ক্রস-অরিজিন ডেটা দ্বারা কলঙ্কিত করা হয়েছে ""

— কাইল আন্ডারহিল

বিকাশকারী.মোজিলা.আর. / এ- ইউএস / ডকস / img..crossOrigin = "Anonymous"ওয়েবে / এইচটিএমএল / সিওআরএস_এনবেবল_আইমেজে উল্লিখিত হিসাবে যুক্ত করা আপনার সমস্যার সমাধান হওয়া উচিত। আমি এটিকে ছোট হাত থেকে 'বেনামে' থেকে আপার ক্ষেত্রে স্থির করেছি। দয়া করে এখন আমার স্নিপেটটি দেখুন

— অ্যান্ড্রি

এটি এসজিজি গ্রহণ করার মতো মনে হচ্ছে না। আমি এখানে রেফারেন্সের জন্য একটি কোডপেন তৈরি করেছি: codepen.io/moofawsaw/pen/RwNVvXV

— কাইল আন্ডারহিল

আমি আপনার কোডেপেন কোডটি এসভিজি ফাইলের সাথে পরীক্ষিত করেছি এবং এটি কাজ করছে বলে মনে হচ্ছে, এটি কনসোলে লগইন করেছে যে আপলোড হওয়া এসভিজি ফাইলটি স্বচ্ছ। দয়া করে আপনার এসভিজি ফাইলটি সংযুক্ত করুন (সম্ভব হলে) এবং আমি এটি যাচাই করব

— অ্যান্ড্রি

এই স্ক্রিপ্ট সম্পর্কে আমার বেশ কয়েকটি প্রশ্ন রয়েছে, (1) যখন কোনও চিত্র ফর্মের দিকে টেনে আনলে এটি ফাইলটি কীভাবে সংরক্ষণ করে কারণ $ _FILES ["fileUpload"] ["নাম"]; ফর্মটিতে টানানো ফাইলগুলির জন্য খালি মনে হচ্ছে। আপনি যদি আপলোড বোতামটি ক্লিক করেন তবে $ _FILES ["ফাইলআপলোড"] ["নাম"]; ফাইলটি দেখায়। (২) এই স্ক্রিপ্টটি ফাইলগুলি কোথায় সংরক্ষণ করে?

— ডায়ন