Abadikan Kanvas HTML sebagai gif / jpg / png / pdf?

Apakah mungkin untuk mengambil atau mencetak apa yang ditampilkan di kanvas html sebagai gambar atau pdf?

Saya ingin menghasilkan gambar melalui kanvas, dan dapat menghasilkan png dari gambar itu.

Ups. Jawaban asli khusus untuk pertanyaan serupa. Ini telah direvisi:

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

dengan nilai dalam IMG Anda dapat menuliskannya sebagai Gambar baru seperti:

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

HTML5 menyediakan Canvas.toDataURL (mimetype) yang diimplementasikan di Opera, Firefox, dan Safari 4 beta. Namun ada beberapa batasan keamanan (sebagian besar berkaitan dengan menggambar konten dari asal lain ke kanvas).

Jadi Anda tidak perlu perpustakaan tambahan.

misalnya

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

Secara teoritis ini harus membuat dan kemudian menavigasi ke gambar dengan kotak hijau di tengahnya, tapi saya belum menguji.

Saya pikir saya akan sedikit memperluas cakupan pertanyaan ini, dengan beberapa informasi berguna tentang masalah ini.

Untuk mendapatkan kanvas sebagai gambar, Anda harus melakukan hal berikut:

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

Anda dapat menggunakan ini untuk menulis gambar ke halaman:

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

Di mana "image / png" adalah tipe mime (png adalah satu-satunya yang harus didukung). Jika Anda ingin array tipe yang didukung, Anda dapat melakukan sesuatu di sepanjang baris ini:

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

Anda hanya perlu menjalankan ini sekali per halaman - itu tidak akan pernah berubah melalui siklus hidup halaman.

Jika Anda ingin membuat pengguna mengunduh file saat disimpan, Anda dapat melakukan hal berikut:

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;

Jika Anda menggunakannya dengan tipe mime yang berbeda, pastikan untuk mengubah kedua instance gambar / png, tetapi tidak untuk image / octet-stream. Perlu juga disebutkan bahwa jika Anda menggunakan sumber daya lintas-domain dalam merender kanvas Anda, Anda akan menemukan kesalahan keamanan ketika Anda mencoba menggunakan metode 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);
}

Saya akan menggunakan " wkhtmltopdf ". Itu hanya bekerja dengan baik. Ini menggunakan mesin webkit (digunakan di Chrome, Safari, dll.), Dan sangat mudah digunakan:

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

Itu dia!

Cobalah

Berikut ini beberapa bantuan jika Anda melakukan pengunduhan melalui server (dengan cara ini Anda dapat memberi nama / konversi / pasca-proses / dll file Anda):

-Post data menggunakan toDataURL

-Mengatur header

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

-membuat gambar

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

Gambar -ekspor sebagai 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();

-atau PNG transparan

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

Solusi menarik lainnya adalah PhantomJS . Ini adalah skrip WebKit tanpa kepala dengan JavaScript atau CoffeeScript.

Salah satu kasus penggunaannya adalah tangkapan layar: Anda dapat secara terprogram menangkap konten web, termasuk SVG dan Kanvas dan / atau Buat tangkapan layar situs web dengan pratinjau thumbnail.

Titik masuk terbaik adalah halaman wiki tangkapan layar .

Ini adalah contoh yang bagus untuk jam polar (dari RaphaelJS):

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

Apakah Anda ingin merender halaman ke PDF?

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

Jika Anda menggunakan jQuery, yang dilakukan banyak orang, maka Anda akan menerapkan jawaban yang diterima seperti:

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

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

Anda dapat menggunakan jspdf untuk menangkap kanvas ke dalam gambar atau pdf seperti ini:

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

Info lebih lanjut: https://github.com/MrRio/jsPDF

Ini adalah cara lain, tanpa ikatan meskipun saya tidak benar-benar tahu apakah lebih cepat atau tidak. Alih-alih toDataURL (karena semua pertanyaan di sini mengusulkan). Dalam kasus saya ingin mencegah dataUrl / base64 karena saya memerlukan buffer atau view Array. Jadi metode lain dalam HTMLCanvasElement adalah toBlob. (Fungsi 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));
}

Keuntungan lain dari blob adalah Anda dapat membuat ObjectUrls untuk merepresentasikan data sebagai file, mirip dengan anggota 'file' HTMLInputFile. Info lebih lanjut:

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

Pada beberapa versi Chrome, Anda dapat:

1. Gunakan fungsi menggambar gambar ctx.drawImage(image1, 0, 0, w, h);
2. Klik kanan pada kanvas