ব্লবকে বেস 64 এ রূপান্তর করুন

Question

এই কোড যে আমি কি করতে চান তাদের জন্য একটি স্নিপেট হয় Blobথেকে Base64: STRING

এই মন্তব্য করা অংশটি কাজ করে এবং এটি যখন উত্পন্ন URL টি img src এ সেট হয় এটি চিত্রটি প্রদর্শন করে:

var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);

var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);

সমস্যাটি নিম্ন কোডের সাথে হয়, উত্সের পরিবর্তনশীল উত্পন্ন হয় ull

হালনাগাদ:

উপরের কোডের মতো ব্লক ফাইল থেকে বেস 64 স্ট্রিং তৈরি করতে সক্ষম হওয়ার জন্য কি জিকুয়ের সাথে এটি করার সহজ উপায় আছে?

Answer 1

 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     var base64data = reader.result;                
     console.log(base64data);
 }

বেস 64 এ ডক্স readAsDataURL এনকোড গঠন করুন

Comments

আউটপুট স্ট্রিং বেস 64 এর মতো দেখাচ্ছে না?

— কোয়ার্কস

@xybrek আপনি যদি read.result মুদ্রণ করেন তবে আপনি স্ট্রিংটিতেই বেস 64 দেখতে পাবেন।

— নওয়াফ আলসুলামি

কনসোল.লগ (বেস64data.substr (base64data.indexOf (',') + 1));

— পালোটা

onloadendreadAsDataURLকিছু অদ্ভুত কিছু ঘটে যাওয়ার আগে আসার আগে এটি উচিত এবং কোডের পরবর্তী লাইনে পৌঁছানোর আগেই এটি লোডিং শেষ করে। অবশ্যই এটি কখনও ঘটবে না তবে এটি এখনও ভাল অনুশীলন।

— 3ocene

এই উত্তরটি ভুল, এটি স্ট্রিংয়ের সামনের অংশে কোনটি-বেস 64 অক্ষর যুক্ত করে।

— জোশুয়া স্মিথ

Answer 2

এটি আমার পক্ষে কাজ করেছে:

var blobToBase64 = function(blob, callback) {
    var reader = new FileReader();
    reader.onload = function() {
        var dataUrl = reader.result;
        var base64 = dataUrl.split(',')[1];
        callback(base64);
    };
    reader.readAsDataURL(blob);
};

Comments

তর্ক কী cb?

— ফেলো অচেনা

@ ফেলোস্ট্রেঞ্জার সাধারণত কলব্যাক, ব্লবটোবেস like৪ (মাই ব্লব, ফাংশন (বেস64 স্ট্রিং) like / * বেস64 স্ট্রিং * /} ব্যবহার করে) এর মতো ব্যবহৃত হয়, কারণ এটি অ্যাসিঙ্ক

— লিওনার্ড

@ ইয়েডিক্সন, দেখে মনে হচ্ছে আপনার সাহায্য দরকার। এটি দেখুন: stackoverflow.com/questions/46192069/…

— সাফল্য ম্যান

Answer 3

var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;

var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
     base64data = reader.result;
     console.log(base64data);
}

Comments

ভাল, @ ভিমনাস কারণ ফাইলআরডার ফলাফলের বৈশিষ্ট্যটিকে বেস 64 হিসাবে প্রকাশ করে, পুরোপুরি কাজ করে।

— ক্যামি রড্রিগেজ

Answer 4

একটি খাঁটি জাভাস্রিপ্ট উপায় রয়েছে যা কোনও স্ট্যাকের উপর নির্ভর করে না:

const blobToBase64 = blob => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  return new Promise(resolve => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
  });
};

এই সহায়ক ফাংশনটি ব্যবহার করার জন্য আপনার একটি কলব্যাক সেট করা উচিত, উদাহরণস্বরূপ:

blobToBase64(blobData).then(res => {
  // do what you wanna do
  console.log(res); // res is base64 now
});

---

আমি রিয়েট নেটিভ প্রকল্পে আমার সমস্যার জন্য এই সহায়ক ফাংশনটি লিখি, আমি একটি চিত্র ডাউনলোড করতে এবং তারপরে এটি ক্যাশেড চিত্র হিসাবে সঞ্চয় করতে চেয়েছিলাম:

fetch(imageAddressAsStringValue)
  .then(res => res.blob())
  .then(blobToBase64)
  .then(finalResult => { 
    storeOnMyLocalDatabase(finalResult);
  });

Answer 5

function bufferToBinaryString(arrayBuffer){
    return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
(async () => console.log(btoa(bufferToBinaryString(await new Response(blob).arrayBuffer()))))();

অথবা

function bufferToBinaryString(arrayBuffer){
    return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
new Response(blob).arrayBuffer().then(arr_buf => console.log(btoa(bufferToBinaryString(arr_buf)))))

দেখতে রেসপন্স এর কন্সট্রাকটর , আপনি চালু করতে পারেন [blob, buffer source form data, readable stream, etc.]মধ্যে রেসপন্স , যা পরিণত করা যেতে পারে[json, text, array buffer, blob] ASYNC পদ্ধতি / callbacks সঙ্গে।

সম্পাদনা করুন: @ র‌্যাল্ফ যেমন উল্লেখ করেছেন, সবকিছুকে utf-8 স্ট্রিংয়ে রূপান্তর করা সমস্যার কারণ হতে পারে (দুর্ভাগ্যক্রমে রেসপন্স এপিআই বাইনারি স্ট্রিংয়ে রূপান্তর করার কোনও উপায় সরবরাহ করে না), সুতরাং অ্যারে বাফারটি এর পরিবর্তে মধ্যবর্তী হিসাবে ব্যবহার করা হবে, যার জন্য আরও দুটি পদক্ষেপ প্রয়োজন (এটিকে রূপান্তরিত করে) বাইটারি অ্যারে THEN তে বাইনারি স্ট্রিং), যদি আপনি দেশীয় btoaপদ্ধতি ব্যবহারের জন্য জেদ করেন ।

Comments

.text () ইউটিএফ 8 ব্যবহার করে ডিকোড করুন, প্রতিক্রিয়াটিতে বাইনারি কোড থাকলে কী হবে? আমি বিশ্বাস করি এটি অ টেক্সট ডেটার জন্য ব্যর্থ হবে

— রাল্ফ

আমি আপনার বক্তব্যটি দেখতে পেয়েছি, উত্তরটি সংশোধন করেছেন (যদিও এটি বেশ দীর্ঘ হয়)। এই মুহূর্তে জিদ না করা ভাল হবেbtoa

— ভ্যালেন

Answer 6

আপনি সমস্যার সমাধান করতে পারেন এর দ্বারা:

var canvas = $('#canvas'); 
var b64Text = canvas.toDataURL();
b64Text = b64Text.replace('data:image/png;base64,','');
var base64Data = b64Text;

আমি আশা করি এটি আপনাকে সাহায্য করবে

Answer 7

সুতরাং সমস্যাটি হ'ল আপনি একটি বেস 64 ইমেজ আপলোড করতে চান এবং আপনার একটি ব্লব ইউআরএল আছে। এখন এইচটিএমএল 5 টি ব্রাউজারে যে উত্তরটি কাজ করবে তা হ'ল:

  var fileInput = document.getElementById('myFileInputTag');
  var preview = document.getElementById('myImgTag');

  fileInput.addEventListener('change', function (e) {
      var url = URL.createObjectURL(e.target.files[0]);
      preview.setAttribute('src', url);
  });
function Upload()
{
     // preview can be image object or image element
     var myCanvas = document.getElementById('MyCanvas');
     var ctx = myCanvas.getContext('2d');
     ctx.drawImage(preview, 0,0);
     var base64Str = myCanvas.toDataURL();
     $.ajax({
         url: '/PathToServer',
         method: 'POST',
         data: {
             imageString: base64Str
         },
     success: function(data) { if(data && data.Success) {}},
     error: function(a,b,c){alert(c);}
     });
 }

Answer 8

কোডের একক লাইনে সর্বাধিক সহজ উপায়

var base64Image = নতুন বাফার (ব্লব, 'বাইনারি')। টোস্ট্রিং ('বেস64');

Comments

কারণ এই উত্তরটি নোড এপিআইগুলি ব্যবহার করে এবং তাই ব্লব (ব্রাউজার এপিআই) সম্পর্কে মূল প্রশ্নের উত্তর দেয় না।

— রিভারার্স

বাফার কী?

— দিন

আমি আনক্যাচড টাইপ এরির পেয়েছি: প্রথম যুক্তিটি অবশ্যই একটি স্ট্রিং, বাফার, অ্যারেবফার, অ্যারে বা অ্যারের মতো অবজেক্ট হতে হবে।

— ভুল

@ টিউডোরক্লেভ এটি নোড.জেএস

— জেডার ডায়াস