comment ajouter l'image dans 'toile' dans un élément 'img'

Question

J'ai un code html comme suit:

<canvas id="canvas1" width="200" height="200"></canvas> 

et un code javaScript comme suit:

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 
var src="https://vignette2.wikia.nocookie.net/mint524/images/d/d7/Sky.jpg/revision/latest?cb=20160706152654.jpg" 

var image = new Image(); 
image.onload = function(){ 
    ctx.drawImage(image,0,0,50,50); 
} 
ctx.fillRect(50,50,50,50); 
image.src = src 

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

Je veux convertir canvas à un élément img, mais j'ai trouvé que je ne peux pas ajouter l'image dans le canevas à l'élément img. Le code confidentiel est le here. Quelqu'un peut-il donner des conseils?

Answer 1

Pour des raisons de sécurité, votre lecteur local est déclaré comme étant «autre domaine» et altère le canevas.

(C'est parce que vos informations les plus sensibles sont susceptibles sur votre disque local!).

Bien que les tests essayer ces solutions de contournement:

• wrap avec le temps l'exportation img à partir de toile
• Mettez tous les fichiers associés (page .html, .jpg, .js, Css, etc.) sur votre Bureau (pas dans les sous-dossiers).
• Publiez vos images sur un site qui prend en charge le partage entre domaines (par exemple, dropbox.com). Assurez-vous de mettre vos images dans le dossier public Dropbox et également définir l'indicateur d'origine croix lors du téléchargement de l'image (var img = new Image(); img.crossOrigin = "anonyme" ...)

setTimeout(
 
    function(){ 
 
    var can = document.getElementById('canvas1'); 
 
    var img = new Image(); 
 
    img.src = can.toDataURL(); 
 
    document.body.appendChild(img); 
 
},2000);

Answer 2

Si vous assurez-vous que votre image n'est pas viciée - voir cette question et la réponse: Tainted canvases may not be exported, vous pouvez changer votre code afin de créer la nouvelle image après votre image, a chargé:

var can = document.getElementById('canvas1'); 
 
var ctx = can.getContext('2d'); 
 
var src = "//i.imgur.com/fHyEMsl.jpg"; 
 

 
var image = new Image(); 
 
image.crossOrigin = "anonymous"; 
 

 
image.onload = function() { 
 
    ctx.drawImage(image, 0, 0, 200, 200); 
 

 
    var img = new Image(); // move this into the onload of the image to make sure the canvas has been drawn 
 
    img.src = can.toDataURL("image/png"); 
 
    document.body.appendChild(img); 
 
} 
 
image.src = src;

<p>Canvas:</p> 
 
<canvas id="canvas1" width="200" height="200"></canvas> 
 
<p>Image should appear below:</p>

Answer 3

La toile agit très similaire à une image. Lorsque vous utilisez canvas.toDataURL et que vous l'attribuez au image.src, vous gaspillez beaucoup de mémoire. L'image sera décodée à partir de dataURL et utilisera la même quantité de RAM pour les pixels que le canevas, mais l'URL dataURL restera également en mémoire.

L'encodage Base64 n'est pas conçu pour la compacité. Chaque caractère Base64 code 6 bits mais chaque caractère Javascript utilise 16 bits. Cela rend le dataURL 2.667 fois plus grand que s'il est stocké sur le disque, et dans certains cas extrêmes peut être plus grand que les données de pixel brutes.

Vous pouvez utiliser canvas.toBlob() et construire l'image à partir du blob et vous éviterez les surcharges de mémoire de l'URL de données redondante. Mais vous êtes toujours avec le problème de la toile tained n'étant pas codé à une image.

La solution la plus simple consiste à traiter la toile comme une image. Ajoutez-le au DOM comme vous le feriez pour une image et épargnez-vous les tracas d'essayer d'encoder et de décoder un format d'image. Que voudriez-vous de l'image que la toile ne fera pas? Le src? Eh bien, c'est le problème, n'est-ce pas?

const canvas = document.createElement("canvas"); 
 
const ctx = canvas.getContext("2d"); 
 
ctx.fillRect(0,0,300,150); 
 
ctx.fillStyle = "white"; 
 
ctx.fillRect(10,10,280,130); 
 
ctx.fillStyle = "Blue"; 
 
ctx.fillRect(15,15,270,120); 
 
ctx.fillStyle = "white"; 
 
ctx.font = "28px arial"; 
 
ctx.fillText("Look like an Image", 20, 40); 
 
ctx.fillText("Acts like an Image", 20, 70); 
 
ctx.font = "20px arial"; 
 
ctx.fillText("Who cares if it's a Canvas", 20, 100); 
 
ctx.textAlign = "right"; 
 
ctx.fillText("", 270, 125); 
 

 

 
function copyCanvas(canvas){ 
 
    const c = canvas.cloneNode(); 
 
    c.getContext("2d").drawImage(canvas,0,0); 
 
    return c; 
 
} 
 
document.body.appendChild(copyCanvas(canvas));