So I am using HTML 2 canvas to generate a social media image.

The issue I'm having is that its not including the css background image.

Having checked the other posts on stack overflow on this none of the solutions seem to work, the version is up-to-date and this wont work even with same origin image. What am I getting wrong?

Codepen link here

function getCapture(){
  html2canvas(document.querySelector(".quote")).then(canvas => {
    
    var quote = document.querySelector(".quote");

    document.body.appendChild(canvas);

    var download = document.getElementById("download");
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    download.setAttribute("href", image);
    download.setAttribute("download","quote.png");

    download.click();

  });
}

$(function(){
  
  $('.generator [name="author"]').keyup(function(){
    var author = $(this).val();
    $('.quote .text small').html('⚊ '   author);
  });
  
  $('.generator [name="quote"]').keyup(function(){
    var quote = $(this).val();
    $('.quote .text p').html(quote);
  });
  
  $('.generator [name="image"]').on('change', function(){
  
    var input = this;
    var url = $(this).val();
    var ext = url.substring(url.lastIndexOf('.')   1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();
        reader.onload = function (e) {
           $('.quote img').attr('src', e.target.result);
        }
       reader.readAsDataURL(input.files[0]);
    }else{
      $('.quote img').attr('src', '');
    }
    
  });
  
});

body{
  background: #152C46;
}

body{
  font-family: 'Manrope';
  font-weight: 400;
}

.quote{
  display: block;
  position: relative;
  /*
  top: 50%;
  transform: translateY(-50%);
  */
  width: 1200px;
  height: 628px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 5%;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   background-image: url("https://i.imgur.com/DVJHJnR.png");
  background-size: 700px;
  background-repeat: no-repeat;
  background-position: top left;
  background-color: white;
}
.bg-img img {
  float: left; 
  top: 0;
  position: absolute;
}
.quote .image{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-align: center
}
.quote .image img{
  display: inline-block;
  width: 160px;
  height: 160px;
  vertical-align: middle;
  margin-top: 15%;
  opacity: 1;
  border-radius: 50%;
  object-fit:cover;
}
.quote .overlay{
  position: absolute;
  width: 97%;
  height: 97%;
  top: 1.5%;
  left: 1.5%;
  z-index: 2;
  border: solid 5px #fff
}
.quote .overlay:after{
  content: '❝';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  color: #152C46;
  line-height: .9;
  font-size: 40em;
  font-weight: 600;
  opacity: .12;
}
.quote .content{
  position: absolute;
  width: 80%;
  height: 80%;
  top: 30%;
  left: 10%;
  z-index: 4;
  text-align: center;
}
.quote .content .text{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #152C46;
}
.quote .content .text > *{word-break: break-word}
.quote .content .text p{
  font-size: 2.7em;
  font-weight: 200
}
.quote .content .text small{
  font-size: .9em;
  font-weight: 700;
  color: #152C46;
  letter-spacing: .01em;
}

.generator{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: rgba(255,255,255,1);
  padding: 25px;
  box-shadow: 0 20px 15px 15px rgba(0,0,0,.2);
  z-index: 5
}
.generator .generator-inner{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.generator h3{
  font-weight: 700;
  margin-bottom: 20px
}
.generator .btn{
  border: 0 none;
  background-color: #FF3CAC;
}
canvas{display: none}

<link href="https://cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js"></script>
<div >
  <div >
    <img src="https://placeimg.com/500/500/arch/sepia" alt="">
  </div>
<!--   <div ></div> -->
  <div >
    <div >
      <p>Love all, trust a few, do wrong to none.</p>
      <small> William Shakespeare</small>
    </div>
      
  </div>
</div>

<div >
  <div >
    
    <h3>Generator</h3>

    <div >
      <label for="quote">Quote</label>
      <textarea type="text"  maxlength="200" name="quote" required>Love all, trust a few, do wrong to none.</textarea>
    </div>

    <div >
      <label for="author">Author</label>
      <input type="text"  name="author" value="William Shakespeare" required>
    </div>

    <div >
      <label for="image">Image</label>
      <input type="file"  name="image" accept="image/x-png,image/gif,image/jpeg">
    </div>

    <div >
      <a href="javascript:getCapture();" >DOWNLOAD</a>
      <a href="javascript:" id="download" style="display: none"></a>
    </div>
    
  </div>     
</div>

CodePudding user response：

Change this in order to get the background image:

  html2canvas(document.querySelector(".quote"),{
    allowTaint: true,
    useCORS: true
  }).then(canvas => {

let me know if it helps you.