Comment éviter un fond noir lors de l’enregistrement d’une div en png

J’utilise HTML2canvas, filesaver.js et canvas2blob.js pour réaliser un dialog de sauvegarde dans le navigateur. La création et la sauvegarde de la canvas à la volée fonctionnent bien, sauf que l’arrière-plan de l’image est en noir.

Le problème est l’image codée en base64 de la div avec id = “drop1” (l’utilisateur fait glisser une image de son bureau vers le code HTML, puis cette image est placée en arrière-plan comme base64).

Comment puis-je obtenir une sortie visible dans le fichier png?

mon JS:

• Les objects FabricJS non relatifs au redimensionnement de la canvas
• Soundcloud modifie la couleur de la forme d’onde
• canvas obtenir des points sur les événements de souris
• Obtenir la position correcte de la souris dans un canevas à l’échelle CSS
• Javascript faisant tourner l’image pour toujours regarder le curseur de la souris?

// save img magic // html2canvas.js linked with filesaver.js and canvas2blob.js for compatibility polyfilling $('#1stSave').click(function() { var html2obj = html2canvas($('#drop1')); var queue = html2obj.parse(); var canvas = html2obj.render(queue); canvas.toBlob(function(blob) { saveAs(blob, "teaser-384x168px.png"); }); }); 

Merci beaucoup d’avance 🙂

• Recadrer l’image dessinée dans la canvas avec JCrop
• Dessinez un rectangle sur une image à l’intérieur d’un canevas à l’aide de l’événement mousemove en javascript
• identifier le type d’object sélectionné dans Fabricjs
• Options d’animation HTML5 Canvas / CSS3 / jQuery
• html2canvas javascript screenshot et upload

  html2canvas($('#drop1'), { onrendered: function(canvas) { var img = canvas.toDataURL() canvas.toBlob(function(blob) { saveAs(blob, "teaser-384x168px.png"); }, "image/png"); } }); 

 $('#element').css('background-color','transparent');