จับ HTML Canvas เป็น gif / jpg / png / pdf หรือไม่

เป็นไปได้หรือไม่ที่จะจับภาพหรือพิมพ์สิ่งที่ปรากฏบนผืนผ้าใบ html เป็นรูปภาพหรือ pdf?

ฉันต้องการสร้างภาพทางผ้าใบและสามารถสร้าง png จากภาพนั้นได้

อุ่ย คำตอบเดิมเป็นคำถามเฉพาะสำหรับคำถามที่คล้ายกัน สิ่งนี้ได้รับการแก้ไขแล้ว:

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

ด้วยค่าใน IMG คุณสามารถเขียนเป็นรูปภาพใหม่ได้ดังนี้:

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

HTML5 ให้ Canvas.toDataURL (mimetype) ซึ่งใช้ใน Opera, Firefox และ Safari 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>

ในทางทฤษฎีสิ่งนี้ควรสร้างแล้วนำทางไปยังรูปภาพที่มีสี่เหลี่ยมสีเขียวอยู่ตรงกลาง แต่ฉันยังไม่ได้ทดสอบ

ฉันคิดว่าฉันจะขยายขอบเขตของคำถามนี้เล็กน้อยด้วยเกร็ดความรู้ที่เป็นประโยชน์ในเรื่องนี้

ในการรับผืนผ้าใบเป็นรูปภาพคุณควรทำสิ่งต่อไปนี้:

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

คุณสามารถใช้สิ่งนี้เพื่อเขียนภาพไปยังหน้า:

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

โดยที่ "image / png" เป็นประเภท mime (png เป็นประเภทเดียวที่ต้องได้รับการสนับสนุน) หากคุณต้องการอาเรย์ประเภทที่รองรับคุณสามารถทำบางสิ่งได้ตามบรรทัดของสิ่งนี้:

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;

หากคุณกำลังใช้สิ่งนั้นด้วยประเภท mime ที่แตกต่างกันตรวจสอบให้แน่ใจว่าได้เปลี่ยนทั้งภาพ / png แต่ไม่ใช่ภาพ / octet-stream เป็นมูลค่าการกล่าวขวัญว่าถ้าคุณใช้ทรัพยากรข้ามโดเมนใด ๆ ในการเรนเดอร์ Canvas ของคุณคุณจะพบข้อผิดพลาดด้านความปลอดภัยเมื่อคุณพยายามใช้เมธอด toDataUrl

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);
}

ฉันจะใช้ " wkhtmltopdf " มันใช้งานได้ดีมาก ใช้เครื่องมือ webkit (ใช้ใน Chrome, Safari, ฯลฯ ) และใช้งานง่ายมาก:

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

แค่นั้นแหละ!

ลองมัน

นี่คือความช่วยเหลือหากคุณดาวน์โหลดผ่านเซิร์ฟเวอร์ (วิธีนี้คุณสามารถตั้งชื่อ / แปลง / โพสต์กระบวนการ / ฯลฯ ไฟล์ของคุณ):

- โพสต์ข้อมูลโดยใช้ 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)));

- ส่งออกรูปภาพเป็น JPEG

$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();

หรือเป็น PNG แบบโปร่งใส

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

อีกวิธีที่น่าสนใจคือPhantomJS มันเป็น WebKit ที่ไม่ต้องใช้สคริปต์กับ JavaScript หรือ CoffeeScript

กรณีการใช้งานอย่างหนึ่งคือการจับภาพหน้าจอ: คุณสามารถบันทึกเนื้อหาเว็บโดยทางโปรแกรมรวมถึง SVG และ Canvas และ / หรือสร้างภาพหน้าจอเว็บไซต์ด้วยภาพตัวอย่างขนาดย่อ

จุดเริ่มต้นที่ดีที่สุดคือหน้า wiki ของการดักจับหน้าจอ

นี่เป็นตัวอย่างที่ดีสำหรับนาฬิกาโพลาร์ (จาก RaphaelJS):

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

คุณต้องการแสดงหน้าเป็น PDF หรือไม่?

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

หากคุณกำลังใช้ jQuery ซึ่งมีผู้คนจำนวนมากทำคุณควรใช้คำตอบที่ยอมรับเช่น:

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

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

คุณสามารถใช้ jspdf เพื่อจับภาพผืนผ้าใบเป็นรูปภาพหรือ pdf เช่นนี้:

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

นี่เป็นวิธีอื่นโดยไม่มีเงื่อนไขถึงแม้ว่าฉันจะไม่รู้จริงๆว่ามันเร็วกว่าหรือไม่ แทน toDataURL (ตามคำถามทั้งหมดที่นี่เสนอ) ในกรณีของฉันต้องการป้องกัน dataUrl / base64 เนื่องจากฉันต้องการบัฟเฟอร์หรือมุมมอง Array ดังนั้นวิธีการอื่น ๆ ในการ HTMLCanvasElement toBlobคือ (ฟังก์ชั่น TypeScript):

    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));
}

ข้อดีอีกอย่างของ blobs คือคุณสามารถสร้าง ObjectUrls เพื่อแสดงข้อมูลเป็นไฟล์คล้ายกับสมาชิก 'files' ของ HTMLInputFile ข้อมูลเพิ่มเติม:

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

ใน Chrome บางเวอร์ชันคุณสามารถ:

1. ใช้ฟังก์ชั่นภาพวาด ctx.drawImage(image1, 0, 0, w, h);
2. คลิกขวาบนพื้นที่วาด