Bagaimana Cara Menyimpan Kanvas Sebagai Gambar Dengan canvas.toDataURL ()?

141

Saat ini saya sedang membangun aplikasi bawaan HTML5 / aplikasi telepon bawaan dan sepertinya saya tidak tahu bagaimana cara menyimpan kanvas saya sebagai gambar dengan canvas.toDataURL() . Bisakah seseorang membantu saya?

Ini kodenya, ada apa dengan itu?

// Kanvas saya bernama "canvasSignature"

JavaScript:

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}

HTML5:

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>

— Wardenclyffe
sumber

4

Pertanyaan OP belum dijawab. Dia jelas mengatakan ini untuk Phonegap / iPad. Jawaban yang diberikan adalah untuk menyimpan di browser desktop.

— tshm001

1

Tidak yakin tentang phonegap, tapi saya sudah melakukan ini dari awal di iOS asli menggunakan JavaScript di ujung lainnya, saya ambil datanya .toDataURL(), lalu gunakan window.location untuk mengarahkan browser appname://[data url]. Di ujung aplikasi, UIWebView memiliki metode delegasi yang mengatakan apakah harus memuat halaman atau tidak. Saya mendengarkan appname://dan memecahnya ketika masuk, menolak memuat halaman dan menangkap url data dalam string asli ... seberapa akrab Anda dengan kode iOS / Objective C aktual?

— Doug

121

Ini beberapa kode. tanpa kesalahan.

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.


window.location.href=image; // it will save locally

— pengguna1874941
sumber

1

Kecuali dalam mode standar IE9: "Beberapa konten atau file di halaman web ini memerlukan program yang belum Anda instal." Internet Explorer 8 dan yang lebih baru hanya mendukung data URI untuk gambar dalam CSS, <link>, dan <img>: developer.mozilla.org/en-US/docs/data_URIs

— Cees Timmerman

45

bekerja dengan baik. bagaimana saya bisa mengubah nama file yang diunduh? itu datang hanya "unduh" dan tanpa ekstensi. Terima kasih!

— Leabdalla

1

Di Chrome, browser ini mogok. Jika saya menampilkan gambar dalam tag gambar, itu berfungsi tetapi menu klik kanan berwarna abu-abu - jadi saya masih tidak dapat menyimpan gambar.

— Kokodoko

Ini berfungsi dengan baik ... Tetapi di Android (browser default di Galaxy S3) itu tidak mengunduh gambar, tetapi saya mendapatkan pesan "Mengunduh ..." selamanya.

— Habrashat

Saya telah menyimpan masalah, seseorang dapat membantu saya melihat tautan ini: stackoverflow.com/questions/25131763/…

— Ramesh S

36

Solusi ini memungkinkan Anda untuk mengubah nama file yang diunduh:

HTML:

<a id="link"></a>

JAVASCRIPT:

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();

— Thomas W
sumber

Terima kasih untuk ini, ini sangat membantu saya!

— Mike Moon

22

Anda dapat menggunakan canvas2image untuk meminta unduhan.

Saya memiliki masalah yang sama, berikut adalah contoh sederhana yang sama-sama menambahkan gambar ke halaman dan memaksa browser untuk mengunduhnya:

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><button onclick="to_image()">Draw to Image</button></div>
        <image id="theimage"></image>
    </body>
</html>

— SColvin
sumber

2

Baru saja mencobanya, ini akan menyimpan file tanpa nama atau ekstensi di Chrome.

— Malber

seperti yang disebutkan di sini pengaturan nihilogic.dk/labs/canvas2image tampaknya tidak mungkin: "Akan sangat rapi jika entah bagaimana nama file dapat dilampirkan ke data, tetapi saya tidak menemukan cara untuk melakukan itu. Untuk saat ini, Anda harus menentukan nama file sendiri. "

— SColvin

1

Tautan yang Anda posting rusak

— Oliver Nybroe

9

Anda dapat mencoba ini; buat jangkar HTML dummy, dan unduh gambar dari sana seperti ...

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);

    downloadImage(dataURL, 'my-canvas.jpeg');
});

// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

— bmatovu
sumber

1

Saya suka fakta bahwa semuanya dilakukan di JS, termasuk pembuatan elemen tautan. Ini bekerja sangat baik untuk keperluan otomatisasi

— Jeromy Adofo

Solusi sempurna

— Hidayt Rahman

8

Saya membuat perpustakaan kecil yang melakukan ini (bersama dengan beberapa konversi berguna lainnya). Ini disebut reimg , dan sangat mudah digunakan.

ReImg.fromCanvas(yourCanvasElement).toPng()

— gillyb
sumber

Perpustakaan keren. Terima kasih. Ada masalah kecil dalam dokumentasi contoh. Saya membuka masalah pada Github untuk menarik perhatian Anda.

— jmknoll

7

Ini berfungsi untuk saya: (Hanya google chrome)

<html>
<head>
    <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100);
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function downloadImage()
            {
                var canvas = document.getElementById("thecanvas");
                var image = canvas.toDataURL();

                var aLink = document.createElement('a');
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("click");
                aLink.download = 'image.png';
                aLink.href = image;
                aLink.dispatchEvent(evt);
            }
    </script>
</head>
<body onload="draw()">
    <canvas width=200 height=200 id="thecanvas"></canvas>
    <div><button onclick="downloadImage()">Download</button></div>
    <image id="theimage"></image>
</body>
</html>

— 1000Bugy
sumber

Mungkin Anda bisa menjelaskan bagian kode Anda yang menjawab pertanyaan alih-alih menempelkannya tanpa komentar?

— Gediminas Masaitis

6

Mirip dengan jawaban 1000Bugy tetapi lebih sederhana karena Anda tidak harus membuat jangkar dengan cepat dan mengirimkan acara klik secara manual (ditambah perbaikan IE).

Jika Anda menjadikan tombol unduhan Anda sebagai jangkar, Anda dapat melakukan highjack tepat sebelum fungsi jangkar default dijalankan. BegituonAnchorClick Anda dapat mengatur anchor href ke gambar canvas base64 dan atribut unduhan anchor ke apa pun yang Anda ingin beri nama gambar Anda.

Ini tidak berfungsi di (saat ini) IE karena tidak menerapkan atribut unduhan dan mencegah unduhan data uris. Tapi ini bisa diperbaiki dengan menggunakanwindow.navigator.msSaveBlob sebagai gantinya.

Jadi pengendali event klik jangkar Anda akan seperti yang diikuti (di mana anchor, canvasdan fileNamelingkup pencarian):

function onClickAnchor(e) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
    e.preventDefault();
  } else {
    anchor.setAttribute('download', fileName);
    anchor.setAttribute('href', canvas.toDataURL());
  }
}

Ini biola

— Sjeiti
sumber

1

Alih-alih imageElement.src = myImage;Anda harus menggunakanwindow.location = myImage;

Dan bahkan setelah itu browser akan menampilkan gambar itu sendiri. Anda dapat mengklik kanan dan menggunakan "Simpan Tautan" untuk mengunduh gambar.

Periksa tautan ini untuk informasi lebih lanjut.

— Hakan Serce
sumber

Wow, terima kasih, itu benar-benar banyak membantu :) Tapi bagaimana Anda mendapatkan kotak penyimpanan sembulan, sehingga seseorang dapat menyimpan ke tujuan tertentu (seperti folder gambar Android mereka)?

— Wardenclyffe

Itu tergantung pada browser spesifik. Browser Android biasanya mengunduh file ke folder tertentu secara langsung, untuk instace.

— Hakan Serce

Di Chrome ini berfungsi, tetapi menu klik kanan berwarna abu-abu. Saat mencoba 'menyeret' gambar keluar dari browser, Chrome mogok.

— Kokodoko

groups.google.com/a/chromium.org/forum/#!topic/blink-dev/… Membuka URL data seperti ini sepertinya akan diblokir.

— KeyOfJ

0

Anda tidak dapat menggunakan metode yang disebutkan sebelumnya untuk mengunduh gambar saat berjalan di Cordova. Anda perlu menggunakan Cordova File Plugin . Ini akan memungkinkan Anda untuk memilih tempat menyimpannya dan memanfaatkan berbagai pengaturan kegigihan. Detail di sini: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

Atau, Anda dapat mengkonversi gambar ke base64 kemudian menyimpan string di localStorage tetapi ini akan mengisi kuota Anda dengan cepat jika Anda memiliki banyak gambar atau resolusi tinggi.

— BigBalli
sumber

-9

@Wardenclyffe dan @SColvin, Anda berdua mencoba menyimpan gambar menggunakan kanvas, bukan dengan menggunakan konteks kanvas. Anda harus mencoba ctx.toDataURL (); Coba ini:

var canvas1 = document.getElementById("yourCanvasId");  <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>

Anda juga dapat merujuk ke tautan berikut:

http://tutorials.jenkov.com/html5-canvas/todataurl.html

http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

— Vinay Chandra
sumber

UnEught TypeError: Object # <CanvasRenderingContext2D> tidak memiliki metode 'toDataURL'.

— Brandon Aubie

Ini salah karena elemen konteks tidak memiliki toDataURLfungsi: developer.mozilla.org/en-US/docs/Web/API/… . Anda ingin memanggil toDataURLelemen kanvas: developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…

— Crashalot