লোকালস্টোরারে কীভাবে কোনও চিত্র সংরক্ষণ করা যায় এবং এটি পরবর্তী পৃষ্ঠায় প্রদর্শন করা যায়?


154

সুতরাং, মূলত, আমার একটি একক চিত্র আপলোড করতে হবে, এটি স্থানীয় স্টোরেজে সংরক্ষণ করতে হবে, তারপরে এটি পরবর্তী পৃষ্ঠায় প্রদর্শিত হবে।

বর্তমানে, আমার আমার এইচটিএমএল ফাইল আপলোড রয়েছে:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

যা পৃষ্ঠায় চিত্রটি প্রদর্শন করতে এই ফাংশনটি ব্যবহার করে

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

চিত্রটি ব্যবহারকারীকে দেখার জন্য পৃষ্ঠায় তাত্ক্ষণিকভাবে প্রদর্শিত হবে। তারপরে তাদের বাকি ফর্মটি পূরণ করতে বলা হয়। এই অংশটি নিখুঁতভাবে কাজ করছে।

ফর্মটি সম্পূর্ণ হয়ে গেলে, তারপরে তারা 'সংরক্ষণ করুন' বোতাম টিপুন। এই বোতামটি টিপে গেলে আমি সমস্ত ফর্ম ইনপুটগুলিকে localStorageস্ট্রিং হিসাবে সংরক্ষণ করি । localStorageআইটেম হিসাবে চিত্রটি সংরক্ষণ করার জন্য আমার একটি উপায় দরকার ।

সেভ বোতামটি তাদেরকে একটি নতুন পৃষ্ঠায় নিয়ে যাবে। এই নতুন পৃষ্ঠাটি একটি টেবিলের মধ্যে ব্যবহারকারীদের ডেটা প্রদর্শন করবে, চিত্রটি শীর্ষে থাকবে।

এত সহজ এবং সরল, localStorageএকবারে 'সেভ' বোতাম টিপলে আমার ছবিটি সংরক্ষণ করতে হবে এবং তার পরের পৃষ্ঠায় চিত্রটি loanণ নিতে হবে localStorage

আমি এই সমাধান এবং এই নিবন্ধটি মোজ: // একটি হ্যাক্স-এর মতো কিছু সমাধান পেয়েছি ।

যদিও এটি কীভাবে কাজ করে তা নিয়ে আমি এখনও খুব বিভ্রান্ত, এবং আমার কেবলমাত্র একটি সহজ সমাধানের প্রয়োজন। মূলত, getElementByIDএকবার 'সেভ' বোতাম টিপলে আমার কেবল চিত্রটি সন্ধান করতে হবে এবং তারপরে চিত্রটি প্রক্রিয়া করে সংরক্ষণ করতে হবে।


2
স্থানীয় স্টোরেজে এই উদাহরণটির মতো পাঠক.সাল্ট সংরক্ষণ করার ক্ষেত্রে কী ভুল: jsfiddle.net/x11joex11/9g8NN ?
ট্রেস করুন

লোকালস্টোরেজে প্রচুর পরিমাণে ডেটা সঞ্চয় করার সন্ধানের জন্য এই লাইব্রেরিটি বেশ সুন্দর: পিয়েরক্সি / এলজেড-স্ট্রিং: জাভাস্ক্রিপ্টের জন্য এলজেড-ভিত্তিক সংকোচনের অ্যালগরিদম
ব্রাসোফিলো

"আমার কেবলমাত্র একটি সহজ সমাধান দরকার" " সবাই না?
রডরিগো

উত্তর:


213

যার জন্যও এই সমস্যাটির সমাধান প্রয়োজন:

প্রথমত, আমি আমার চিত্রটি দখল করি getElementByIDএবং বেস 64 হিসাবে চিত্রটি সংরক্ষণ করি। তারপরে আমি বেস 64 স্ট্রিংটিকে আমার localStorageমান হিসাবে সংরক্ষণ করি ।

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

এখানে ফাংশনটি চিত্রটিকে একটি বেস 64 স্ট্রিংয়ে রূপান্তরিত করে:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

তারপরে, আমার পরবর্তী পৃষ্ঠায় আমি একটি ফাঁকা srcমতো একটি চিত্র তৈরি করেছি:

<img src="" id="tableBanner" />

এবং পৃষ্ঠাটি লোড হয়ে যাওয়ার সাথে সাথে বেস64 স্ট্রিংটি পেতে আমি এই পরবর্তী তিনটি লাইন ব্যবহার করি localStorageএবং এটি srcতৈরি করা ফাঁকা দিয়ে চিত্রটিতে প্রয়োগ করি :

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

এটি বেশ কয়েকটি পৃথক ব্রাউজার এবং সংস্করণে পরীক্ষা করেছে এবং এটি বেশ ভালভাবে কাজ করছে বলে মনে হচ্ছে।


1
জিআইএফ সমর্থন করে না, কারণ জিআইএফ ক্যানভাস দ্বারা সমর্থিত নয়।
অ্যালেন

16
আপনার getBase64 ইমেজ ফাংশন প্রয়োজন হবে না। ডেটা ইউআরএলগুলি ইতিমধ্যে base৪ ভিত্তিতে রয়েছে তাই যখন আপনি পাঠককে কল করেন Aআডআডডাটাআরএল পাঠক.অনলোড হ্যান্ডলারের কাছে প্রেরিত e.target.result আপনার প্রয়োজন হবে।
জেমস এইচ। কেলি

3
মনে রাখবেন যে স্থানীয় / সেশন স্টোরেজের জন্য প্রায় 5MB সীমা রয়েছে। এবং একটি বাইনারি চিত্রকে বেস 64 এনকোড স্ট্রিংয়ে রূপান্তর করা এটি প্রায় 30% বড় করে তুলবে। সুতরাং এটি উচ্চ রেজোলিউশন চিত্রগুলির জন্য কাজ করবে না।
নোল আব্রাহামস

আপনি ডাটা ইউআরএলটির প্রাথমিক অংশটি কেন ছাঁটাবেন? আকার কমাতে?
ডিস্ট্রোল করুন

3
নোট করুন যে আপনার প্রথমে চিত্রটি পুরোপুরি লোড হওয়া দরকার (অন্যথায় খালি চিত্র ধারণ করার আগে শেষ হওয়া উচিত), তাই কিছু ক্ষেত্রে আপনাকে হ্যান্ডলিং মোড়ানো দরকার: ব্যানারআইমেজ.এডএভেন্টলিস্টনার ("লোড", ফাংশন ();});
YE

9

আমি স্থানীয় স্টোরেজ জিকুয়ারিআইমেজক্যাচিংয়ের ব্যবহারটিতে চিত্র সংরক্ষণের জন্য একটি সামান্য 2,2kb গ্রন্থাগার লিখেছি :

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>

2
২.২ কিলোবাইটগুলি এর মতো কোনও কিছুর জন্য বিশাল, এবং আমি অনুমান করছি যে এটি jQuery আকারেও ফ্যাক্টর করে না। আমি jQuery ছাড়াই এটি লেখার পরামর্শ দেব, সম্ভবত এটি আরও ছোট হবে
ChrisBrownie55

গিটবব অনুযায়ী 1.74 কেবি
হাকিকো

6

আপনি চিত্রটি একটি ডেটা ইউআরআইতে সিরিয়ালাইজ করতে পারেন। এই ব্লগ পোস্টে একটি টিউটোরিয়াল আছে । এটি একটি স্ট্রিং উত্পাদন করবে যা আপনি স্থানীয় স্টোরেজে সঞ্চয় করতে পারেন। তারপরের পৃষ্ঠায়, চিত্রটির উত্স হিসাবে ডেটা ইউরি ব্যবহার করুন।


0

"নোট করুন যে আপনার প্রথমে চিত্রটি পুরোপুরি লোড হওয়া দরকার (অন্যথায় খালি চিত্র ধারণ করার আগে শেষ হওয়া উচিত), সুতরাং কিছু ক্ষেত্রে আপনাকে হ্যান্ডলিংটি এগুলিতে আবৃত করতে হবে: ব্যানারআইমেজ.এডএভেন্টলিস্টনার (" লোড ", ফাংশন () {}); - যুগ নভেম্বর 1 '17 এ 13:04 "

এটি অত্যন্ত গুরুত্বপূর্ণ। আমি আজ বিকেলে যে বিকল্পগুলির সন্ধান করছি সেগুলির একটি হ'ল অ্যাডএভেন্টলিস্টনারগুলির চেয়ে জাভাস্ক্রিপ্ট কলব্যাক পদ্ধতি ব্যবহার করা হচ্ছে যেহেতু এটি সঠিকভাবে আবদ্ধ বলে মনে হয় না। পৃষ্ঠা লোড হওয়ার আগে পৃষ্ঠা লোড হওয়ার আগে সমস্ত উপাদান প্রস্তুত হওয়া সমালোচনা is

যদি কেউ এর বিস্তৃতি করতে পারে তবে দয়া করে করুন - যেমন, আপনি পছন্দসই ফলাফল পেতে একটি সেটটাইমআউট, একটি অপেক্ষা, কলব্যাক, বা একটি অ্যাডভেন্টলিস্টনার পদ্ধতি ব্যবহার করেছিলেন? কোনটি এবং কেন?


আপনি যদি পারেন তবে সর্বদা একটি কলব্যাক ব্যবহার করুন এবং যদি আপনি এড়াতে পারেন তবে সেটআপ আউট ব্যবহার করবেন না। নকশা দ্বারা, আপনি আগের জিনিসটির পরে জিনিসটি যতটা সম্ভব ওভারহেডের সাথে ঘটতে চান। কলব্যাকগুলি ঠিক এটির জন্যই তৈরি করা হয়েছে
গ্রেইসন

-2

আমি একই সমস্যাটি নিয়ে এসেছি, চিত্রগুলি সংরক্ষণ করার পরিবর্তে, শেষ পর্যন্ত স্থানীয় স্টোরেজকে উপচে ফেলেছি, আপনি কেবল চিত্রটির পথ সঞ্চয় করতে পারেন। কিছুটা এইরকম:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.