envoie carte apercu v2

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html

@@ -171,8 +171,8 @@
           <!--<img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">-->
           <div class="subCard1-row d-flex flex-row">
             <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
-            <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
-
+            <div class="merchant-logo">
+              <img src="{{commercant.image.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
             </div>
           </div>
           <div class="subCard1-row d-flex flex-row">

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss

@@ -23,6 +23,7 @@
   margin-top: 2vh;
   margin-right: auto;
   margin-left: auto;
+  z-index: 0;
 }
 
 .subCard1-row {
@@ -39,17 +40,27 @@
 }
 
 .merchant-logo {
+  position: relative;
+  z-index: 5;
   background-repeat: no-repeat;
   background-size:50%;
   background-position : center;
-}
 
-#image1 {
-  z-index: 1;
-  padding: 0;
+  #image1 {
+    position: absolute;
+    top: 10%;
+    left: 0;
+    width: 50%;
+    height: auto;
+    z-index: 1;
+    padding: 0;
+  }
 }
 
+
+
 #subCard1::before {
+  z-index: 0;
   content: ' ';
   display: block;
   width: 100%;
@@ -58,7 +69,6 @@
   background-color: fade_out(black, 0.5);
   left: 0;
   top: 0;
-  z-index: 2;
 }
 
 #subCard2Part1 {

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.ts

@@ -415,6 +415,7 @@ export class EnvoyerCarteComponent implements OnInit, OnDestroy {
         canvas.crossOrigin = 'Anonymous';
 
         canvas.id = 'canvas';
+        document.querySelector('body').appendChild(canvas);
         canvas.toBlob(blob => {
 
           const nouvelleImg = new Image();