HTML Canvas를 gif / jpg / png / pdf로 캡처 하시겠습니까?

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는 Opera, Firefox, Safari 4 베타에서 구현 된 Canvas.toDataURL (mimetype)을 제공합니다. 그러나 여러 가지 보안 제한이 있습니다 (대부분 다른 원본에서 캔버스에 콘텐츠를 그리는 것과 관련이 있음).

따라서 추가 라이브러리가 필요하지 않습니다.

예 :

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

If you're using that with different mime types, be sure to change both instances of image/png, but not the image/octet-stream. It is also worth mentioning that if you use any cross-domain resources in rendering your canvas, you will encounter a security error when you try to use the toDataUrl method.

---

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

---

I would use "wkhtmltopdf". It just work great. It uses webkit engine (used in Chrome, Safari, etc.), and it is very easy to use:

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

That's it!

Try it

---

Here is some help if you do the download through a server (this way you can name/convert/post-process/etc your file):

-Post data using toDataURL

-Set the headers

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

-create image

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

-export image as 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();

-or as transparent PNG

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

---

Another interesting solution is PhantomJS. It's a headless WebKit scriptable with JavaScript or CoffeeScript.

One of the use case is screen capture : you can programmatically capture web contents, including SVG and Canvas and/or Create web site screenshots with thumbnail preview.

The best entry point is the screen capture wiki page.

Here is a good example for polar clock (from RaphaelJS):

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

Do you want to render a page to a PDF ?

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

---

If you are using jQuery, which quite a lot of people do, then you would implement the accepted answer like so:

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

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

---

You can use jspdf to capture a canvas into an image or pdf like this:

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

More info: https://github.com/MrRio/jsPDF

---

This is the other way, without strings although I don't really know if it's faster or not. Instead of toDataURL (as all questions here propose). In my case want to prevent dataUrl/base64 since I need a Array buffer or view. So the other method in HTMLCanvasElement is toBlob. (TypeScript function):

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

Another advantage of blobs is you can create ObjectUrls to represent data as files, similar to HTMLInputFile's 'files' member. More info:

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

---

On some versions of Chrome, you can:

1. Use the draw image function ctx.drawImage(image1, 0, 0, w, h);
2. Right-click on the canvas

참고URL : https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf