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>
.toDataURL()
, lalu gunakan window.location untuk mengarahkan browserappname://[data url]
. Di ujung aplikasi, UIWebView memiliki metode delegasi yang mengatakan apakah harus memuat halaman atau tidak. Saya mendengarkanappname://
dan memecahnya ketika masuk, menolak memuat halaman dan menangkap url data dalam string asli ... seberapa akrab Anda dengan kode iOS / Objective C aktual?Jawaban:
Ini beberapa kode. tanpa kesalahan.
sumber
Solusi ini memungkinkan Anda untuk mengubah nama file yang diunduh:
HTML:
JAVASCRIPT:
sumber
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:
sumber
Anda dapat mencoba ini; buat jangkar HTML dummy, dan unduh gambar dari sana seperti ...
sumber
Saya membuat perpustakaan kecil yang melakukan ini (bersama dengan beberapa konversi berguna lainnya). Ini disebut reimg , dan sangat mudah digunakan.
ReImg.fromCanvas(yourCanvasElement).toPng()
sumber
Ini berfungsi untuk saya: (Hanya google chrome)
sumber
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. Begitu
onAnchorClick
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 menggunakan
window.navigator.msSaveBlob
sebagai gantinya.Jadi pengendali event klik jangkar Anda akan seperti yang diikuti (di mana
anchor
,canvas
danfileName
lingkup pencarian):Ini biola
sumber
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.
sumber
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.
sumber
@Wardenclyffe dan @SColvin, Anda berdua mencoba menyimpan gambar menggunakan kanvas, bukan dengan menggunakan konteks kanvas. Anda harus mencoba ctx.toDataURL (); Coba ini:
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
sumber
toDataURL
fungsi: developer.mozilla.org/en-US/docs/Web/API/… . Anda ingin memanggiltoDataURL
elemen kanvas: developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…