Converti tela su un'immagine con JavaScript

Question

Voglio convertire la tela su un'immagine con JavaScript, quando provo a canvas.toDataURL("image/png"); dà l'errore SecurityError: The operation is insecure. Per favore aiutami a risolvere questo problema.

Grazie in anticipo.

Answer 1

hai l'idea giusta, e che funzionerà in casi molto semplici, come ad esempio:

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

ctx.fillRect(50,50,50,50); 

var img = new Image(); 
img.src = can.toDataURL(); 
document.body.appendChild(img); 

http://jsfiddle.net/simonsarris/vgmFN/

ma diventa problematico se si dispone di "sporcato" la tela. Questo viene fatto disegnando immagini sulla tela che provengono da un'origine diversa. Ad esempio, se la tua tela è ospitata su www.example.com e utilizzi immagini da www.wikipedia.org, il flag di origine dell'originale della tua tela è impostato su false internamente.

Una volta che la bandiera origine da pulire è impostato su false, voi non sono più autorizzati a chiamare toDataURL o getImageData

---

Tecnicamente, le immagini sono della stessa origine se i domini, i protocolli e le porte corrispondono.

---

Se si sta lavorando a livello locale (file: //) allora ogni immagine disegnata farà scattare la bandiera. Ciò rende fastidioso il debugging, ma con Chrome puoi avviarlo con la flag --allow-file-access-from-files per consentire ciò.

Answer 2

questo ha lavorato per me

//after creating your plot do 
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data 
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it 
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //