ক্লিক করে চিত্র ফাইলগুলি ডাউনলোড করতে ব্রাউজারকে বাধ্য করুন


107

এক্সেল শিটটিতে ক্লিক করার সময় চিত্রের ফাইলগুলি ঠিক যেমন ডাউনলোড করতে হয় তেমন আমার ব্রাউজারের দরকার।

কেবল ক্লায়েন্ট-সাইড প্রোগ্রামিং ব্যবহার করে এটি করার কোনও উপায় আছে?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js">
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        </script>
    </head>

    <script type="text/javascript">
        document.onclick = function (e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            if (element.innerHTML == "Image") {
                //someFunction(element.href);
                var name = element.nameProp;
                var address = element.href;
                saveImageAs1(element.nameProp, element.href);
                return false; // Prevent default action and stop event propagation
            }
            else
                return true;
        };

        function saveImageAs1(name, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    </script>

    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            </div>
        </form>
    </body>
</html>

এক্সেল শীট ডাউনলোড করার ক্ষেত্রে এটি কীভাবে কাজ করবে (ব্রাউজারগুলি কী করবে)?


7
downloadঅ্যাট্রিবিউট।
Vidime বিদাস

6
ফাইল ডাউনলোডগুলি নিশ্চিত করার সর্বোত্তম উপায় হ'ল সার্ভারসাইডে সামগ্রীর স্বভাব নির্ধারণ করা, বেশিরভাগ ক্লায়েন্টাইড সমাধানগুলি নির্ভরযোগ্য নয়।
অ্যাডেনিও


: একটি অনুরূপ প্রশ্ন যা ইতিমধ্যে আপনার জন্য উত্তর নেই stackoverflow.com/a/6799284/1948211
dschu

কার্ল-আন্দ্রে গাগনন: দয়া করে এটিকে যথাযথভাবে প্রবেশ করুন [[আমি এটি এইচটিএমএল 5 ট্যাগ করিনি যেহেতু আমি এটি ব্যবহার করতে চাই না] এবং ডাব্লু / ও সার্চ স্পর্শ
অমিত

উত্তর:


179

এইচটিএমএল 5 ব্যবহার করে আপনি আপনার লিঙ্কগুলিতে 'ডাউনলোড' বৈশিষ্ট্যটি যুক্ত করতে পারেন।

<a href="https://stackoverflow.com/path/to/image.png" download>

কমপ্লায়েন্ট ব্রাউজারগুলি একই ফাইলের নামের সাথে এই চিত্রটি ডাউনলোড করার অনুরোধ জানাবে (এই উদাহরণে image.png)।

আপনি যদি এই বৈশিষ্ট্যের জন্য কোনও মান নির্দিষ্ট করে থাকেন তবে তা নতুন ফাইলের নাম হয়ে যাবে:

<a href="https://stackoverflow.com/path/to/image.png" download="AwesomeImage.png">

আপডেট: বসন্ত 2018 এর হিসাবে এই আর সম্ভব জন্য ক্রস-অরিজিন hrefগুলি । সুতরাং আপনি যদি <a href="https://i.imgur.com/IskAzqA.jpg" download>imgur.com ব্যতীত অন্য কোনও ডোমেইনে তৈরি করতে চান তবে এটি ইচ্ছাকৃতভাবে কাজ করবে না। ক্রোম অবমূল্যায়ন এবং সরানোর ঘোষণা


রিচার্ড পার্নবী-কিং: এইচটিএমএল 5 টি বৈশিষ্ট্য ব্যবহার করে এটি করা যেতে পারে তবে HTML5 বা কোনও সার্ভার সাইট সরঞ্জাম ব্যবহার না করে আমার এটি করা দরকার (যদি এটি করা সম্ভব হয়) সাহায্যকারীদের জন্য ধন্যবাদ :)
অমিত

4
এখনও সমস্ত ব্রাউজারে সম্পূর্ণরূপে সমর্থিত নয় তবে আপনি যদি IE বা সাফারি সম্পর্কে চিন্তা না করেন তবে এটি একটি ভাল সমাধান। caniuse.com/#feat=download
stacigh

ধন্যবাদ, এইচটিএমএল 5 সমাধানের জন্য। 'সেভ এজ' এর জন্য কীভাবে অনুমতি দেওয়া যায় যা সংরক্ষণের আগে আমাকে একটি ফাইলের নাম প্রবেশ করান?
টেলিভিশন

এই ফাইলটি কোথায় ডাউনলোড করা উচিত তা আমি নিয়ন্ত্রণ করতে পারি না? এটি সরাসরি ফোল্ডার ডাউনলোড করতে ডাউনলোড করে। আমি এটি এইচটিএমএল ফাইলের স্থানীয় পথ ব্যবহার করতে চাই।
অর্জুন চিদ্দোয়ার

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

102

আমি নথিতে একটি লিঙ্ক যুক্ত করে ক্রোম এবং ফায়ারফক্সে এটি কাজ করতে সক্ষম হয়েছি।

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

4
এটি আসলে ওয়েব-অ্যাপগুলির জন্য খুব সুন্দর সমাধান যেখানে জাভাস্ক্রিপ্ট পুরো জায়গা জুড়ে রয়েছে। যদিও শুধুমাত্র গুগল ক্রোমে (আমার পরীক্ষার সেটআপে) কাজ করে।
পাভেল

সামঞ্জস্যতার জন্য পরীক্ষার পথে কোনও ধারণা? আমি এই কৌশলটি ব্যবহার করতে চাই তবে অন্যান্য ব্রাউজারগুলিকেও সমর্থন করা দরকার, তাই যখন এটি সমর্থিত না হয় তখন বিকল্প (যেমন একটি নতুন উইন্ডোতে খোলা পিডিএফ, বা ডাউনলোডের জন্য একটি লিঙ্ক) সরবরাহ করা প্রয়োজন। কারও সাথে কি ভাগ্য হয়েছে?
অ্যালেক্সারসেল

13
দুর্দান্ত সমাধান, ধন্যবাদ! মনে রাখবেন আপনি বাদ document.body.appendChild(link)দিলে এটি ফায়ারফক্সে কাজ করবে না। এটি document.body.removeChild(link);link.click()
তৈরির

8
সেরা সমাধান. setTimeout( function () { link.parentNode.removeChild( link ); },10 );
ডিওএম

4
জাভাস্ক্রিপ্টে এটি কীভাবে করা উচিত প্রশ্ন জিজ্ঞাসা করার পর থেকেই ধন্যবাদ নির্বাচিত উত্তর হওয়া উচিত।
কোডহেলপ 4

35

লিয়ারয় এবং রিচার্ড পার্নবী-কিং:

আপডেট: 2018 এর বসন্ত হিসাবে ক্রস-আদি হ্রেফগুলির পক্ষে এটি আর সম্ভব নয়। সুতরাং আপনি যদি imgur.com ব্যতীত অন্য কোনও ডোমেইনে তৈরি করতে চান তবে এটি ইচ্ছাকৃতভাবে কাজ করবে না। ক্রোম অবমূল্যায়ন এবং সরানোর ঘোষণা

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

4
চিত্র ডাউনলোড হয় তবে এটি প্রকাশিত হয় না যেমনটি বলা হয়েছে 'চিত্রটি ভাঙ্গা'
পিকাকোড

পারফেক্ট! আমার জন্য কাজ করছি।
তাফারেল জাভিয়ের

21

আপডেট স্প্রিং 2018

<a href="/path/to/image.jpg" download="FileName.jpg">

যদিও এটি এখনও সমর্থিত আছে, ক্রোম-অরিজিন ডাউনলোডের জন্য ক্রোম এই বৈশিষ্ট্যটি অক্ষম করেছে 2018 অর্থ ফাইলটি একই ডোমেন নামের উপর অবস্থিত থাকলে কেবল এটি কাজ করবে।

ক্রোমের নতুন আপডেটের পরে ক্রস ডোমেন ডাউনলোডগুলি নিষ্ক্রিয় করার পরে ক্রস ডোমেন চিত্রগুলি ডাউনলোড করার জন্য আমি একটি কাজের সন্ধান পেয়েছি। আপনার প্রয়োজন অনুসারে আপনি এটি কোনও ফাংশনে রূপান্তর করতে পারেন। আপনার যদি প্রয়োজন হয় তবে আপনি আরও কিছু গবেষণা সহ চিত্রটি মাইম-টাইপ (জেপেইগ, পিএনজি, জিআইএফ, ইত্যাদি) পেতে সক্ষম হতে পারেন। ভিডিওগুলির সাথে এর সাথে সাদৃশ্যপূর্ণ কিছু করার উপায়ও থাকতে পারে। আশা করি এটি কাউকে সাহায্য করবে!

লিয়ারয় এবং রিচার্ড পার্নবী-কিং:

আপডেট: বসন্ত 2018 এর পরে ক্রস-আদি হ্রেফগুলির পক্ষে এটি আর সম্ভব নয়। সুতরাং আপনি যদি imgur.com ব্যতীত অন্য কোনও ডোমেইনে তৈরি করতে চান তবে এটি ইচ্ছা মতো কাজ করবে না। ক্রোম অবমূল্যায়ন এবং সরানোর ঘোষণা

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Click image to download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


দেখে মনে হচ্ছে এই কোডটি চিত্রটিকে ডিকোড করে ব্রাউজার মেমরির পিক্সেলগুলির একটি বাফার হিসাবে ফেলেছে, তারপরে এটিকে জেপিগ / পিএনজি / জিআইএফ হিসাবে পুনরায় কোডড করে তারপরে এটি একটি ডেটা-ইউরিতে এনপ্যাপুলেট করে যা আশাকরি স্থানীয়ভাবে সংরক্ষণ করা হয়। যদি তা হয় তবে এর অর্থ হ'ল চিত্র ফাইল থেকে সমস্ত মেটাডেটা হারিয়ে গেছে। এছাড়াও পুনরায় কোডিং জেপিজি কিছু গুণ হারাবে এবং আরও খারাপ মানের / বাইট-কাউন্ট অনুপাত হবে। তবুও, জেনে রাখা ভাল। ভাগ করে নেওয়ার জন্য ধন্যবাদ.
স্টাফেন গৌরিচোন

14
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     

5
সাফারি ব্রাউজার ডাউনলোড বৈশিষ্ট্য সমর্থন করে না
প্রণব লাভে

14

প্রতিশ্রুতি এবং অ্যাসিঙ্ক / প্রতীক্ষা ব্যবহার করে আরও একটি আধুনিক পদ্ধতি:

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}

তারপর

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

এখানে ডকুমেন্টেশন সন্ধান করুন: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


11

এটি আপনার সমস্যার একটি সাধারণ সমাধান। তবে একটি খুব গুরুত্বপূর্ণ অংশ রয়েছে যে ফাইল এক্সটেনশনটি আপনার এনকোডিংয়ের সাথে মেলে। এবং অবশ্যই, ডাউনলোড আইমেজ ফাংশনের সেই সামগ্রী পরামিতিটি আপনার চিত্রের বেস 64 এনকোডড স্ট্রিং হওয়া উচিত।

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});
a gif image: <image id="img" src="data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" />


<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>


4
যিনি এটি জিজ্ঞাসা করেছেন তার জন্য এটিকে প্রাসঙ্গিক করার জন্য দয়া করে আপনার উত্তরের একটি সংক্ষিপ্ত ব্যাখ্যা যুক্ত করুন
এজিই

4
link.href = 'ডেটা: অ্যাপ্লিকেশন / অক্টেট-স্ট্রিম,' + এনকোডিউআরআইকিউম্পোনেন্ট (ঠিকানা) এটি ফাইলটিকে দূষিত করে এবং তাই এটি খুলতে পারে না, কেন তা এমন হয় তা বোঝায়
ওম

হ্যাঁ, এই উত্তরটি সেরা হওয়ার যোগ্য! আমার অনুপস্থিত অংশটি হ'ল "ক্লিনআরল" জিনিস, যা ত্রুটিযুক্ত ডেটা তৈরি করেছিল এবং ফাইলটি ভেঙে দিয়েছিল।
আইউলিয়ান পিনজারু

3

2020-এ আমি চিত্রের স্থানীয় অনুলিপি তৈরি করতে ব্লব ব্যবহার করি , কোন ব্রাউজারটি ফাইল হিসাবে ডাউনলোড করবে। আপনি এই সাইটে এটি পরীক্ষা করতে পারেন ।

এখানে চিত্র বর্ণনা লিখুন

(function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);

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


0
<html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>

0

আপনি অনেক কোড ছাড়াই অ্যাঙ্কর ট্যাগ ব্যবহার করে সরাসরি এই ফাইলটি ডাউনলোড করতে পারেন ।
স্নিপেটটি অনুলিপি করুন এবং আপনার পাঠ্য সম্পাদক-এ পেস্ট করুন এবং চেষ্টা করুন ...!

<html>
<head>
</head>
<body>
   <div>
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
      <a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
   </div>
</body>
</html>


4
দয়া করে আরও বিশদ যুক্ত করুন, উদাহরণস্বরূপ যেখানে এই কোডটি ব্যবহার করা যেতে পারে।
ম্যাকিয়েজ এস

-3

। ক্লিক () ফাংশন এবং ট্যাগটি ব্যবহার সম্পর্কে কী?

(সংক্ষেপিত সংস্করণ)

<a id="downloadtag" href="examplefolder/testfile.txt" hidden download></a>

<button onclick="document.getElementById('downloadtag').click()">Download</button>

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

(জেএস-ফাংশন সংস্করণ)

function download(){
document.getElementById('downloadtag').click();
}
<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>


-5

আমি এটি খুঁজে পেয়েছি

<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>

আমার জন্য কাজ করে না। আমি নিশ্চিত না কেন।

আমি খুঁজে পেয়েছি যে আপনি ?download=trueডাউনলোডের জন্য আপনার লিঙ্কের শেষে একটি প্যারামিটার অন্তর্ভুক্ত করতে পারেন । আমি মনে করি আমি এই কৌশলটি Google ড্রাইভ দ্বারা ব্যবহৃত হচ্ছে লক্ষ্য করেছি।

আপনার লিঙ্কে, ?download=trueআপনার href এর শেষে অন্তর্ভুক্ত করুন।

আপনি একই সময় ফাইলের নাম সেট করতে এই কৌশলটি ব্যবহার করতে পারেন।

আপনার লিঙ্কে, ?download=true&filename=My_Image_File.jpegআপনার href এর শেষে অন্তর্ভুক্ত করুন।


4
? ডাউনলোড = সত্য তাদের সার্ভারকে চিত্রটি ডাউনলোড করতে সঠিক শিরোনাম প্রেরণ করতে বলার জন্য গুগল ড্রাইভে পাস করা হয়েছে। এটি এমন কোনও জিনিস নয় যা অন্য কোনও পরিবেশে কাজ করবে যদি না এটি নির্দিষ্টভাবে সেট আপ করা হয়।
মুনছেলেলি

-16

এটি করার জন্য আপনার জেএস লেখার দরকার নেই, কেবল ব্যবহার করুন:

<a href="path_to/image.jpg" alt="something">Download image</a>

এবং ব্রাউজারটি স্বয়ংক্রিয়ভাবে চিত্রটি ডাউনলোড করবে।

যদি কোনও কারণে এটি কাজ না করে তবে ডাউনলোডের বৈশিষ্ট্য যুক্ত করুন। এই বৈশিষ্ট্যটি দিয়ে আপনি ডাউনলোডযোগ্য ফাইলের জন্য একটি নাম সেট করতে পারেন:

<a href="path_to/image.jpg" download="myImage">Download image</a>

যদি আপনার ব্রাউজারটি অন্যরকমভাবে কনফিগার না করা হয় তবে চিত্রটির লিঙ্কটি কেবল একই উইন্ডোতে চিত্রটি খুলবে। downloadঅ্যাট্রিবিউট সব ব্রাউজারে সমর্থিত নয়।
এড্রিয়ান
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.