ক্যানভাস.টিডেটাআরএল () এর সাহায্যে একটি চিত্র হিসাবে ক্যানভাস কীভাবে সংরক্ষণ করবেন?

141

আমি বর্তমানে একটি এইচটিএমএল 5 ওয়েব অ্যাপ / ফোনগ্যাপ নেটিভ অ্যাপ্লিকেশন তৈরি করছি এবং আমার ক্যানভাসটি কীভাবে একটি চিত্র হিসাবে সংরক্ষণ করতে হবে তা আমি বুঝতে পারি না canvas.toDataURL()। কেউ আমাকে সাহায্য করতে পারেন?

এখানে কোড, এতে কী দোষ আছে?

// আমার ক্যানভাসটির নাম দেওয়া হয়েছিল "ক্যানভাসসাইনচার"

javascript:

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}

HTML5 এর:

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>

— Wardenclyffe
সূত্র

4

ওপির প্রশ্নের উত্তর দেওয়া হয়নি। তিনি স্পষ্টভাবে বলেছিলেন এটি ফোনগ্যাপ / আইপ্যাডের জন্য। দেওয়া উত্তরগুলি ডেস্কটপ ব্রাউজারে সংরক্ষণের জন্য।

— tshm001

1

ফোনগ্যাপ সম্পর্কে নিশ্চিত নয়, তবে আমি অন্য প্রান্তে জাভাস্ক্রিপ্ট ব্যবহার করে নেটিভ আইওএসে স্ক্র্যাচ থেকে এটি করেছি, আমি ডেটা ক্যাপচার করি .toDataURL(), তারপরে ব্রাউজারটি নির্দেশ করতে উইন্ডো.লোকশন ব্যবহার করি appname://[data url]। অ্যাপ্লিকেশন শেষে, ইউআইবিউভিউয়ের একটি প্রতিনিধি পদ্ধতি রয়েছে যা বলে যে এটি কোনও পৃষ্ঠা লোড করা উচিত কিনা should আমি এটি শুনতে পেয়েছি appname://এবং এটি ভেঙে ফেলি, পৃষ্ঠা লোড অস্বীকার করি এবং নেটিভ স্ট্রিংয়ে ডেটা ইউআরএল ক্যাপচার করি ... আপনি সত্যিকারের আইওএস / অবজেক্টিভ সি কোডটির সাথে কতটা পরিচিত?

— ডগ 23

121

এখানে কিছু কোড। কোন ত্রুটি ছাড়াই

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.


window.location.href=image; // it will save locally

— user1874941
সূত্র

1

আইই 9 স্ট্যান্ডার্ড মোড ব্যতীত: "এই ওয়েবপৃষ্ঠায় কিছু সামগ্রী বা ফাইলগুলির এমন একটি প্রোগ্রামের প্রয়োজন যা আপনি ইনস্টল করেন নি" " ইন্টারনেট এক্সপ্লোরার 8 এবং উপরেরগুলি কেবল CSS, <লিঙ্ক> এবং <img> চিত্রগুলিতে ডেটা ইউআরআই সমর্থন করে: বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

45

ঠিকভাবে কাজ করে. ডাউনলোড করা ফাইলের নাম আমি কীভাবে পরিবর্তন করতে পারি? এটি কেবল "ডাউনলোড" এবং এক্সটেনশন ছাড়াই আসছে। ধন্যবাদ!

— লেবডাল্লা

1

ক্রোমে এটি ব্রাউজারটি ক্র্যাশ করে। আমি যদি কোনও চিত্র ট্যাগে চিত্রটি প্রদর্শন করি তবে এটি কাজ করে তবে ডান-ক্লিক মেনুটি ধুসর -

— কোকোডোকো

এটি দুর্দান্ত কাজ করে ... তবে অ্যান্ড্রয়েডে (গ্যালাক্সি এস 3 এ ডিফল্ট ব্রাউজার) এটি কেবল চিত্রটি ডাউনলোড করে না, তবে আমি চিরকালের জন্য "ডাউনলোডিং ..." বার্তাটি পাই।

— হাব্রাশত

আমার কাছে ইস্যুটি সংরক্ষণ হয়েছে কেউ আমাকে এই লিঙ্কটি দেখতে সহায়তা করতে পারে: stackoverflow.com/questions/25131763/…

— রমেশ এস

36

এই সমাধানটি আপনাকে ডাউনলোড করা ফাইলটির নাম পরিবর্তন করতে দেয়:

এইচটিএমএল:

<a id="link"></a>

javascript:

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();

— টমাস ডাব্লু
সূত্র

এর জন্য আপনাকে ধন্যবাদ, এটি আমাকে অনেক সাহায্য করেছে!

— মাইক মুন

22

আপনি ডাউনলোডের জন্য প্রম্পট করতে canvas2image ব্যবহার করতে পারেন ।

আমার একই সমস্যা ছিল, এখানে একটি সাধারণ উদাহরণ যা উভয়ই পৃষ্ঠায় চিত্র যুক্ত করে এবং এটি ডাউনলোড করতে ব্রাউজারকে বাধ্য করে:

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><button onclick="to_image()">Draw to Image</button></div>
        <image id="theimage"></image>
    </body>
</html>

— SColvin
সূত্র

2

এটি চেষ্টা করে দেখুন, এটি ক্রোমে কোনও নাম বা এক্সটেনশন ছাড়াই একটি ফাইল সংরক্ষণ করবে।

— ম্যালবার

এখানে উল্লিখিত হিসাবে nihilogic.dk/labs/canvas2image ফাইলের নাম নির্ধারণ করা সম্ভব বলে মনে হচ্ছে না: "যদি কোনও ফাইলের নাম ডেটাতে সংযুক্ত করা যায় তবে এটি খুব ঝরঝরে হবে তবে আমি এটি করার কোনও উপায় খুঁজে পাইনি। আপাতত, আপনাকে নিজের ফাইল নামটি নির্দিষ্ট করতে হবে।

— এসকলভিন

1

আপনার পোস্ট করা লিংকটি নষ্ট হয়েছে

— অলিভার নাইব্রো

9

আপনি এটি চেষ্টা করতে পারেন; একটি ডামি এইচটিএমএল অ্যাঙ্কর তৈরি করুন এবং সেখান থেকে ছবিটি ডাউনলোড করুন ...

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);

    downloadImage(dataURL, 'my-canvas.jpeg');
});

// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

— bmatovu
সূত্র

1

আমি লিংক উপাদানটি তৈরি সহ জেএসে সমস্ত কিছু করা হয়েছিল তা আমি পছন্দ করি। এটি অটোমেশন উদ্দেশ্যে দুর্দান্ত কাজ করে

— জেরোমি অ্যাডোফো

নিখুঁত সমাধান

— হিদায়ত রহমান

8

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

ReImg.fromCanvas(yourCanvasElement).toPng()

— gillyb
সূত্র

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

— jmknoll

7

এটি আমার জন্য কাজ: (কেবলমাত্র গুগল ক্রোম)

<html>
<head>
    <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100);
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function downloadImage()
            {
                var canvas = document.getElementById("thecanvas");
                var image = canvas.toDataURL();

                var aLink = document.createElement('a');
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("click");
                aLink.download = 'image.png';
                aLink.href = image;
                aLink.dispatchEvent(evt);
            }
    </script>
</head>
<body onload="draw()">
    <canvas width=200 height=200 id="thecanvas"></canvas>
    <div><button onclick="downloadImage()">Download</button></div>
    <image id="theimage"></image>
</body>
</html>

— 1000Bugy
সূত্র

সম্ভবত আপনি আপনার কোডের সেই অংশটি ব্যাখ্যা করতে পারেন যা কোনও মন্তব্য ছাড়াই কেবল এটি আটকে দেওয়ার পরিবর্তে প্রশ্নের উত্তর দেয়?

— গেডিমিনাস মাসাইটিস

6

1000Bugy এর উত্তরের অনুরূপ তবে সরল কারণ আপনাকে ফ্লাইতে অ্যাঙ্কর তৈরি করতে হবে না এবং ম্যানুয়ালি একটি ক্লিক ইভেন্ট প্রেরণ করতে হবে না (প্লাস কোনও আইই ফিক্স)।

আপনি যদি আপনার ডাউনলোড বোতামটি একটি অ্যাঙ্কর করে থাকেন তবে আপনি ডিফল্ট অ্যাঙ্কর কার্যকারিতা চালানোর আগেই এটিকে হাইজ্যাক করতে পারেন। সুতরাং onAnchorClickআপনি ক্যানভাস বেস 64 ছবিতে অ্যাঙ্কর href সেট করতে পারেন এবং আপনি যেভাবে নিজের ইমেজের নাম রাখতে চান তার জন্য অ্যাঙ্কর ডাউনলোড বৈশিষ্ট্যটি সেট করতে পারেন।

এটি (বর্তমান) আইই তে কাজ করে না কারণ এটি ডাউনলোড বৈশিষ্ট্যটি কার্যকর করে না এবং ডেটা ইউরিস ডাউনলোড করা বাধা দেয়। তবে এটি ব্যবহার করে স্থির করা যায়window.navigator.msSaveBlob পরিবর্তে ।

সুতরাং আপনার নোঙ্গর ক্লিক ইভেন্ট হ্যান্ডলার হিসাবে অনুসৃত করা হবে (যেখানে anchor, canvasএবং fileNameসুযোগ লুক-হয়):

function onClickAnchor(e) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
    e.preventDefault();
  } else {
    anchor.setAttribute('download', fileName);
    anchor.setAttribute('href', canvas.toDataURL());
  }
}

এখানে একটি ঝাঁকুনি

— Sjeiti
সূত্র

1

পরিবর্তে imageElement.src = myImage;আপনার ব্যবহার করা উচিতwindow.location = myImage;

এবং তার পরেও ব্রাউজারটি চিত্রটি নিজেই প্রদর্শন করবে। ছবিটি ডাউনলোড করার জন্য আপনি ডান ক্লিক করতে পারেন এবং "লিঙ্ক সংরক্ষণ করুন" ব্যবহার করতে পারেন।

পরীক্ষা করে দেখুন এই লিঙ্কে আরও তথ্যের জন্য।

— হাকান সারস
সূত্র

বাহ, ধন্যবাদ, যা সত্যিই অনেক সাহায্য করেছে :) তবে কীভাবে আপনি একটি পপ আপ সেভ বক্স পাবেন, যাতে কেউ নির্দিষ্ট গন্তব্যে (তাদের অ্যান্ড্রয়েড চিত্রগুলির ফোল্ডারের মতো) সংরক্ষণ করতে পারে?

— ওয়ার্ডেনস্লিফ

এটি নির্দিষ্ট ব্রাউজারের উপর নির্ভর করে। অ্যান্ড্রয়েড ব্রাউজার সাধারণত ইনস্টল করার জন্য একটি নির্দিষ্ট ফোল্ডারে সরাসরি ফাইলগুলি ডাউনলোড করে।

— হাকান সেরেস 20'12

ক্রোমে এটি কাজ করে তবে ডান-ক্লিক মেনুটি ধুসর। চিত্রটি ব্রাউজারের বাইরে নিয়ে যাওয়ার চেষ্টা করার সময় ক্রোম ক্র্যাশ হয়ে যায়।

— কোকোডোকো

groups.google.com/a/chromium.org/forum/#!topic/blink-dev/… ডেটা ইউআরএল খোলার মতো এটির মতো অবরুদ্ধ হতে চলেছে।

— কীফএফজে

0

কর্ডোভাতে চলার সময় আপনি কোনও চিত্র ডাউনলোড করার জন্য পূর্বে উল্লিখিত পদ্ধতিগুলি ব্যবহার করতে পারবেন না। আপনাকে কর্ডোভা ফাইল প্লাগইন ব্যবহার করতে হবে । এটি আপনাকে কোথায় সংরক্ষণ করতে হবে তা বেছে নেওয়ার এবং বিভিন্ন ধৈর্য্যের সেটিংস উপস্থাপনের অনুমতি দেবে। বিশদগুলি এখানে: https://cordova.apache.org/docs/en/latest/references/cordova-plugin-file/

বিকল্পভাবে, আপনি চিত্রটি বেস64 এ রূপান্তর করতে পারেন তারপরে লোকালস্টোরারে স্ট্রিংটি সঞ্চয় করতে পারেন তবে আপনার যদি অনেক চিত্র বা উচ্চ- রেজিস থাকে তবে এটি আপনার কোটাটি পুরোপুরি পূরণ করবে।

— BigBalli
সূত্র

-9

@ ওয়ার্ডেনক্লিফ এবং @ এসকলভিন, আপনি উভয়ই ক্যানভাসের প্রসঙ্গটি ব্যবহার করে নয়, ক্যানভাস ব্যবহার করে চিত্রটি সংরক্ষণ করার চেষ্টা করছেন। আপনার উভয়েরই ctx.toDataURL () চেষ্টা করা উচিত; এটা চেষ্টা কর:

var canvas1 = document.getElementById("yourCanvasId");  <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>

এছাড়াও আপনি নিম্নলিখিত লিঙ্কগুলি উল্লেখ করতে পারেন:

http://tutorials.jenkov.com/html5-canvas/todataurl.html

http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

— বিনয় চন্দ্র
সূত্র

আনকড টাইপ এরির: অবজেক্ট # <ক্যানভাস রেন্ডারিং কনটেক্সট 2D> এর 'টুডা URL' তে কোনও পদ্ধতি নেই।

— ব্র্যান্ডন অবি

যেমন প্রেক্ষাপটে উপাদান একটি নেই এই ভুল toDataURLফাংশন: developer.mozilla.org/en-US/docs/Web/API/... । আপনি toDataURLক্যানভাস উপাদানটিতে কল করতে চান : developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…

— ক্র্যাশলোট