Chụp Canvas HTML dưới dạng gif / jpg / png / pdf?

Có thể chụp hoặc in những gì được hiển thị trong một khung vải html dưới dạng hình ảnh hoặc pdf không?

Tôi muốn tạo một hình ảnh thông qua canvas và có thể tạo png từ hình ảnh đó.

Giáo sư. Câu trả lời ban đầu là cụ thể cho một câu hỏi tương tự. Điều này đã được sửa đổi:

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

với giá trị trong IMG bạn có thể viết nó thành một hình ảnh mới như vậy:

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

HTML5 cung cấp Canvas.toDataURL (mimetype) được triển khai trong Opera, Firefox và Safari 4 beta. Tuy nhiên, có một số hạn chế về bảo mật (chủ yếu là để vẽ nội dung từ nguồn gốc khác lên khung vẽ).

Vì vậy, bạn không cần một thư viện bổ sung.

ví dụ

 <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>

Về mặt lý thuyết, điều này sẽ tạo và sau đó điều hướng đến một hình ảnh có hình vuông màu xanh lá cây ở giữa nó, nhưng tôi chưa thử nghiệm.

Tôi nghĩ rằng tôi sẽ mở rộng phạm vi của câu hỏi này một chút, với một số thông tin hữu ích về vấn đề này.

Để có được khung vẽ dưới dạng hình ảnh, bạn nên làm như sau:

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

Bạn có thể sử dụng điều này để viết hình ảnh lên trang:

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

Trong đó "image / png" là loại mime (png là loại duy nhất phải được hỗ trợ). Nếu bạn muốn một mảng các loại được hỗ trợ, bạn có thể làm gì đó dọc theo dòng này:

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

Bạn chỉ cần chạy cái này một lần trên mỗi trang - nó sẽ không bao giờ thay đổi qua vòng đời của trang.

Nếu bạn muốn làm cho người dùng tải xuống tệp khi nó được lưu, bạn có thể làm như sau:

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;

Nếu bạn đang sử dụng loại đó với các loại mime khác nhau, hãy đảm bảo thay đổi cả hai trường hợp của hình ảnh / png, nhưng không phải là hình ảnh / octet-stream. Một điều đáng nói nữa là nếu bạn sử dụng bất kỳ tài nguyên tên miền chéo nào trong kết xuất canvas của mình, bạn sẽ gặp phải lỗi bảo mật khi bạn cố gắng sử dụng phương thức 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);
}

Tôi sẽ sử dụng " wkhtmltopdf ". Nó chỉ hoạt động tuyệt vời. Nó sử dụng công cụ webkit (được sử dụng trong Chrome, Safari, v.v.) và rất dễ sử dụng:

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

Đó là nó!

Thử nó

Dưới đây là một số trợ giúp nếu bạn thực hiện tải xuống thông qua một máy chủ (theo cách này bạn có thể đặt tên / chuyển đổi / hậu xử lý / vv tập tin của bạn):

Dữ liệu -Post sử dụng toDataURL

-Thiết lập các tiêu đề

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

hình ảnh -tạo

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

-xuất hình ảnh dưới dạng 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();

-Hoặc như PNG trong suốt

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

Một giải pháp thú vị khác là PhantomJS . Đó là một kịch bản WebKit không đầu với JavaScript hoặc CoffeeScript.

Một trong những trường hợp sử dụng là chụp màn hình: bạn có thể lập trình chụp nội dung web, bao gồm SVG và Canvas và / hoặc Tạo ảnh chụp màn hình trang web với xem trước hình thu nhỏ.

Điểm vào tốt nhất là trang wiki chụp màn hình .

Dưới đây là một ví dụ tốt cho đồng hồ cực (từ RaphaelJS):

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

Bạn có muốn kết xuất một trang thành PDF?

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

Nếu bạn đang sử dụng jQuery, điều mà khá nhiều người làm, thì bạn sẽ thực hiện câu trả lời được chấp nhận như vậy:

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

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

Bạn có thể sử dụng jspdf để chụp canvas vào hình ảnh hoặc pdf như thế này:

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

Thông tin thêm: https://github.com/MrRio/jsPDF

Đây là một cách khác, không có chuỗi mặc dù tôi không thực sự biết nó có nhanh hơn hay không. Thay vì toDataURL (như tất cả các câu hỏi ở đây đề xuất). Trong trường hợp của tôi, tôi muốn ngăn dataUrl / base64 vì tôi cần một bộ đệm Array hoặc dạng xem. Vì vậy, phương pháp khác trong HTMLCanvasEuity là toBlob. (Hàm 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));
}

Một ưu điểm khác của các đốm màu là bạn có thể tạo ObjectUrl để biểu thị dữ liệu dưới dạng tệp, tương tự như thành viên 'tệp' của HTMLInputFile. Thêm thông tin:

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

Trên một số phiên bản Chrome, bạn có thể:

1. Sử dụng chức năng vẽ hình ảnh ctx.drawImage(image1, 0, 0, w, h);
2. Nhấp chuột phải vào khung vẽ