এইচটিএমএল ক্যানভাসকে জিআইএফ / জেপিজি / পিএনজি / পিডিএফ হিসাবে ক্যাপচার করবেন?

Question

এইচটিএমএল ক্যানভাসে চিত্র বা পিডিএফ হিসাবে প্রদর্শিত যা ক্যাপচার বা মুদ্রণ করা সম্ভব?

আমি ক্যানভাসের মাধ্যমে একটি চিত্র তৈরি করতে চাই এবং সেই চিত্র থেকে একটি পিএনজি উত্পন্ন করতে সক্ষম হব।

Comments

এখানে একটি পাইথোনিক সমাধান: স্ট্যাকওভারফ্লো . com/ জিজ্ঞাসা / १ 3 95৯6464৪৯৯/২

— ইউজিন জিআর। ফিলিপভ

HTMLCanvasElement / toDataURL # উদাহরণ

— স্যাম

উদাহরণস্বরূপ freakyjolly.com/…

— কোড স্পাই

আপনি এর জন্য ক্যানভাস 2 আইমেজ লাইব্রেরিটি দরকারী পেতে পারেন: github.com/hongru/canvas2image

— noego

Answer 1

উফ। মূল উত্তর একই ধরণের প্রশ্নের সাথে নির্দিষ্ট ছিল। এটি সংশোধিত হয়েছে:

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

আইএমজির মান সহ আপনি এটি নতুন চিত্র হিসাবে লিখতে পারেন:

document.write('<img src="'+img+'"/>');

Comments

আরও একটি প্রশ্ন, আমি এই ট্যাগটিতে থাকা চিত্রটি সার্ভারে কীভাবে সংরক্ষণ করতে পারি। কোন অনুমান ??

— সূর্য

তবে যদি আমি var img = canvas.toDataURL ("চিত্র / jpeg") ব্যবহার করি; পুরো কালো হিসাবে পটভূমি পাচ্ছি। কীভাবে এটি সংশোধন করবেন

— গৌটি করুন

উহু চলো. আমি এর জবাব ২০০৯ সালে দিয়েছিলাম। আপনি কী আশা করবেন?

— donohoe

@ দোনোহো বাস্তবে আপনি এটি উত্তর দিয়েছেন আগস্ট ২০১০ :)

— নিক

এটি এমন কিছু করার জন্য অনেক কম স্মৃতি ব্যবহার করবে var img = new Image(); img.src = canvas.toDataURL(); document.body.appendChild(img);। document.writeকোড, ডেটা URL টি করছে তাদের একটি এইচটিএমএল স্ট্রিং উপার্জন, তারপর DOM মধ্যে যে স্ট্রিং এর একটি কপি নির্বাণ, ব্রাউজার তারপর যে এইচটিএমএল স্ট্রিং বিশ্লেষণ করতে, ইমেজ উপাদান আরেকটি কপি করা, তারপর আবার চালু করতে এটি পার্স হয়েছে চিত্রের ডেটাতে ডেটা ইউআরএল, তারপরে শেষ পর্যন্ত এটি চিত্রটি দেখাতে পারে। স্ক্রিন আকারের চিত্রের জন্য এটি বিশাল পরিমাণের মেমরি / অনুলিপি / পার্সিং করছে। স্রেফ একটি পরামর্শ

— gman

Answer 2

এইচটিএমএল 5 ক্যানভাস.টোডেটাআরএল (মাইমেটাইপ) সরবরাহ করে যা অপেরা, ফায়ারফক্স এবং সাফারি 4 বিটাতে প্রয়োগ করা হয়। নিরাপত্তা সংক্রান্ত বেশ কয়েকটি বিধিনিষেধ রয়েছে, তবে (বেশিরভাগ ক্ষেত্রে অন্য কোনও উত্স থেকে ক্যানভাসে আঁকতে হবে)।

সুতরাং আপনার অতিরিক্ত লাইব্রেরি লাগবে না।

যেমন

 <canvas id=canvas width=200 height=200></canvas>
 <script>
      window.onload = function() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");
          context.fillStyle = "green";
          context.fillRect(50, 50, 100, 100);
          // no argument defaults to image/png; image/jpeg, etc also work on some
          // implementations -- image/png is the only one that must be supported per spec.
          window.location = canvas.toDataURL("image/png");
      }
 </script>

তাত্ত্বিকভাবে এটির মাঝখানে সবুজ বর্গক্ষেত্র সহ একটি চিত্র তৈরি এবং তারপরে নেভিগেট করা উচিত, তবে আমি পরীক্ষা করিনি।

Comments

যেখানে চিত্রটি সংরক্ষণ করা হবে। আমার লোকেশনে লোকেশন?

— chinna_82

চিত্রটি আপনার ব্রাউজারে একটি চিত্র হিসাবে প্রদর্শিত হবে। তারপরে আপনি এটিকে ডিস্কে বা যে কোনও কিছুতে সংরক্ষণ করতে পারেন। এখানে একটি দ্রুত এবং নোংরা জেনেরিক "ক্যানভাস 2 পিএনজি" বুকমার্কলেট রয়েছে যা পৃষ্ঠার প্রথম ক্যানভাসটিকে পিএনজিতে রূপান্তর করে এবং এটি একটি নতুন উইন্ডোতে ব্রাউজারে প্রদর্শন করে:javascript:void(window.open().location = document.getElementsByTagName("canvas")[0].toDataURL("image/png"))

— কাই কার্ভার

যদি চিত্রটি কয়েক এমবি আকারের হয় তবে আপনার ব্রাউজারটি ক্রাশ করার জন্য প্রস্তুত করুন (আমি ফায়ারফক্সে কিছুক্ষণ আগে এটি করেছি)।

— জাহু

একাধিক চিত্র রেন্ডার করতে কীভাবে এটি পরিবর্তন করা যেতে পারে?

— মানসিকবিদ

ডেটা ইউআরআইয়ের সর্বাধিক দৈর্ঘ্য রয়েছে, তাই কোনও চিত্রের আকারের উপরের সীমাটি থাকে যা আপনি কোনও ডেটা ইউআরএল রাখতে পারেন।

— জুহা সিরিজালি

Answer 3

আমি ভেবেছিলাম যে আমি এই বিষয়ে কিছু কার্যকর টিডবিট দিয়ে এই প্রশ্নের পরিধিটি কিছুটা বাড়িয়ে দেব।

একটি চিত্র হিসাবে ক্যানভাস পেতে, আপনার নিম্নলিখিত করা উচিত:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png");

আপনি পৃষ্ঠাতে চিত্রটি লিখতে এটি ব্যবহার করতে পারেন:

document.write('<img src="'+image+'"/>');

যেখানে "ইমেজ / পিএনজি" হ'ল মাইম টাইপ (পিএনজি হ'ল একমাত্র এটি সমর্থনযোগ্য)। আপনি যদি সমর্থিত ধরণের একটি অ্যারে চান তবে আপনি এর লাইন বরাবর কিছু করতে পারেন:

var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary 
var acceptedMimes = new Array();
for(i = 0; i < imageMimes.length; i++) {
    if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {
        acceptedMimes[acceptedMimes.length] = imageMimes[i];
    }
}

আপনার প্রতি পৃষ্ঠায় এটি একবার চালানো দরকার - এটি কোনও পৃষ্ঠার জীবনচক্রের মাধ্যমে কখনও পরিবর্তন হওয়া উচিত নয়।

আপনি যদি ব্যবহারকারীটিকে ফাইলটি সেভ হিসাবে ডাউনলোড করতে চান তবে আপনি নিম্নলিখিতটি করতে পারেন:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)
window.location.href = image;

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

Comments

ফাইলটি ডাউনলোড করার জন্য আপনার সমাধানের সাথে, আমি অবশ্যই যে সফ্টওয়্যারটি ব্যবহার করতে চাইছি তা অবশ্যই বেছে নিতে হবে, এটি কিছুটা অসুবিধাজনক নয় ... মাইমকে পিএনজি হিসাবে একবার ডাউনলোড করার পরে কি পুনরায় প্রতিস্থাপন করার কোনও উপায় আছে?

— So4ne

@ So4ne আমি এটি মনে করি না, এটি ডাউনলোডের জন্য ব্যবহারকারীকে প্রম্পট করার জন্য একটি চিত্র / অকটেট-স্ট্রিম হতে হবে। যদি আপনি এই লাইনটি থেকে মুক্তি পান তবে আপনি পৃষ্ঠাটি চিত্রটিতে পুনঃনির্দেশ দিয়ে শেষ করবেন। যদিও অন্য কেউ এইভাবে সুন্দরভাবে করার উপায় জানেন কিনা তা জানতে আমি আগ্রহী।

— মিয়ামামসো

<a> লিঙ্ক এবং। ক্লিক ক্লিক করে লক্ষ্য = "_ ফাঁকা" ব্যবহার করে (ডাউনলোড) / এফএফ ডেটা-ইউআরএল পরীক্ষা করা এবং টেক্সট /

— সিএসভি

এটা অসাধারণ. ধন্যবাদ! তবে আমি যদি সার্ভারে সংরক্ষণ করতে চাই এবং স্থানীয় না? কোনও ফর্ম ফাইল ইনপুট কি img src কে আপলোডযোগ্য এমন কিছু হিসাবে গ্রহণ করবে?

— চিফ অ্যালকেমিস্ট

উফ। সবেমাত্র উত্তর খুঁজে পেয়েছি। পূর্বের প্রশ্নটি রেখে অন্য কেউ যদি দেখতে পাচ্ছে যে স্ট্যাকওভারফ্লো ::

— চিফ অ্যালকেমিস্ট

Answer 4

function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

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

Comments

সংরক্ষিত ফাইলটি .svg ফর্ম্যাটে থাকে। কীভাবে এটি পিএনজি হিসাবে সংরক্ষণ করবেন?

— নালপয়েন্টার

এটি একটি দুর্দান্ত সমাধান ব্যতীত এটি IE এ কাজ না করে। ত্রুটি পাওয়া "সিস্টেম কলটিতে ডেটা

— স্থানটি

ক্রোমে এটি "নেটওয়ার্ক ত্রুটি" বলে, ফায়ারফক্সে এটি দুর্দান্ত কাজ করে। (লিনাক্সে)

— একার00

Answer 5

আমি " wkhtmltopdf " ব্যবহার করব । এটা ঠিক দুর্দান্ত কাজ। এটি ওয়েবকিট ইঞ্জিন (ক্রোম, সাফারি ইত্যাদিতে ব্যবহৃত) ব্যবহার করে এবং এটি ব্যবহার করা খুব সহজ:

wkhtmltopdf stackoverflow.com/questions/923885/ this_question.pdf

এটাই!

চেষ্টা করে দেখুন

Comments

আমিও ডাব্লুএইচটিএমলেটপডিএফ ক্যাম্পে আছি। আমরা এটি সংরক্ষণাগার এবং এটির আশ্চর্যের জন্য ব্যবহার করে আসছি।

— ড্যানিয়েল জাজো

লগইন তথ্যের প্রয়োজনীয় পৃষ্ঠায় WKHTML টু পিডিএফ কীভাবে ব্যবহার করবেন? আমি পিএসডি তে রূপান্তর করতে জসরেপোর্ট ব্যবহার করছি তবে আমি আমার লিখিত বিষয়বস্তু

— এইচটিএমএল

পরীক্ষা @khaledDehia: stackoverflow.com/questions/10287386/...

— Lepe

Answer 6

আপনি যদি কোনও সার্ভারের মাধ্যমে ডাউনলোডটি করেন তবে এখানে কিছু সহায়তা দেওয়া হয়েছে (আপনি নিজের ফাইলটির নাম / রূপান্তর / পোস্ট-প্রক্রিয়া / ইত্যাদি করতে পারেন):

পোষ্ট ডেটা ব্যবহার করে toDataURL

- শিরোনামগুলি সেট করুন

$filename = "test.jpg"; //or png
header('Content-Description: File Transfer');
if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false)      
  header("Content-type: application/force-download");else       
  header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"$filename\"");   
header("Content-Transfer-Encoding: binary"); 
header("Expires: 0"); header("Cache-Control: must-revalidate"); 
header("Pragma: public");

চিত্র তৈরি করুন

$data = $_POST['data'];
$img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));

- জেপিজি হিসাবে চিত্র রফতানি করুন

$width = imagesx($img);
$height = imagesy($img);
$output = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($output,  255, 255, 255);
imagefilledrectangle($output, 0, 0, $width, $height, $white);
imagecopy($output, $img, 0, 0, 0, 0, $width, $height);
imagejpeg($output);
exit();

বা স্বচ্ছ পিএনজি হিসাবে

imagesavealpha($img, true);
imagepng($img);
die($img);

Answer 7

আর একটি আকর্ষণীয় সমাধান হ'ল ফ্যান্টমজেএস । এটি জাভাস্ক্রিপ্ট বা কফিস্ক্রিপ্ট সহ একটি মাথাবিহীন ওয়েবকিট স্ক্রিপ্টযোগ্য।

ব্যবহারের কেসগুলির মধ্যে একটি হ'ল স্ক্রিন ক্যাপচার: আপনি এসভিজি এবং ক্যানভাস এবং / অথবা থাম্বনেইল পূর্বরূপ সহ ওয়েব সাইটের স্ক্রিনশট তৈরি করতে প্রোগ্রামগতভাবে ওয়েব সামগ্রীগুলি ক্যাপচার করতে পারেন।

সেরা এন্ট্রি পয়েন্ট হ'ল স্ক্রিন ক্যাপচার উইকি পৃষ্ঠা।

পোলার ঘড়ির জন্য এখানে একটি ভাল উদাহরণ (রাফেলজেএস থেকে):

>phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png

আপনি কি কোনও পিডিএফ-তে কোনও পৃষ্ঠা রেন্ডার করতে চান?

> phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf

Comments

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

— jhndodo

PhantomJs এখন অপ্রচলিত

— Merc

Answer 8

আপনি যদি jQuery ব্যবহার করে থাকেন, যা প্রচুর পরিমাণে লোকেরা করে থাকে তবে আপনি গ্রহণযোগ্য উত্তরটি এভাবে প্রয়োগ করবেন:

var canvas = $("#mycanvas")[0];
var img = canvas.toDataURL("image/png");

$("#elememt-to-write-to").html('<img src="'+img+'"/>');

Comments

মনে রাখবেন যে এখানে jQuery এর একমাত্র ব্যবহার হ'ল ক্যানভাস নির্বাচন। .toDataURLনেটিভ জেএস।

— j6m8

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

— রমেশ এস

খাঁটি (100%) jQuery সমাধান নিম্নলিখিত: $('<img>').attr('src',$('#mycanvas')[0].toDataURL('image/png')).appendTo($('#element-to-write-to').empty());ঠিক এক লাইন।

— নায়েল মাকসুদভ

Answer 9

আপনি এই জাতীয় চিত্র বা পিডিএফ-তে ক্যানভাস ক্যাপচার করতে jspdf ব্যবহার করতে পারেন:

var imgData = canvas.toDataURL('image/png');              
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');

আরও তথ্য: https://github.com/MrRio/jsPDF

Answer 10

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

    export function canvasToArrayBuffer(canvas: HTMLCanvasElement, mime: string): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => canvas.toBlob(async (d) => {
    if (d) {
      const r = new FileReader();
      r.addEventListener('loadend', e => {
        const ab = r.result;
        if (ab) {
          resolve(ab as ArrayBuffer);
        }
        else {
           reject(new Error('Expected FileReader result'));
        }
      }); r.addEventListener('error', e => {
        reject(e)
      });
      r.readAsArrayBuffer(d);
    }
    else {
      reject(new Error('Expected toBlob() to be defined'));
    }
  }, mime));
}

ব্লবগুলির আর একটি সুবিধা হ'ল এইচটিএমএলপুটফাইলে 'ফাইলস' সদস্যের মতো ফাইল হিসাবে ডেটা উপস্থাপন করতে আপনি অবজেক্টআরলস তৈরি করতে পারেন। অধিক তথ্য:

https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/toBlob

Answer 11

Chrome এর কয়েকটি সংস্করণে, আপনি এটি করতে পারেন:

1. অঙ্কন চিত্র ফাংশন ব্যবহার করুন ctx.drawImage(image1, 0, 0, w, h);
2. ক্যানভাসে রাইট ক্লিক করুন