2. Algorithm
  3. javascript - html2canvas wont include css background image in download - Stack Overflow

javascript - html2canvas wont include css background image in download - Stack Overflow

admin2025-04-20  0

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(".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=".1.99/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href=".1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".min.js"></script>
<script src=".js/1.14.4/popper.min.js"></script>
<link href=".1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".0.0-alpha1/jquery.min.js"></script>
<div class="quote">
  <div class="image">
    <img src="" alt="">
  </div>
<!--   <div class="overlay"></div> -->
  <div class="content">
    <div class="text">
      <p>Love all, trust a few, do wrong to none.</p>
      <small> William Shakespeare</small>
    </div>
      
  </div>
</div>

<div class="generator">
  <div class="generator-inner">
    
    <h3>Generator</h3>

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

    <div class="form-group">
      <label for="author">Author</label>
      <input type="text" class="form-control" name="author" value="William Shakespeare" required>
    </div>

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

    <div class="form-group">
      <a href="javascript:getCapture();" class="btn btn-block btn-secondary">DOWNLOAD</a>
      <a href="javascript:" id="download" style="display: none"></a>
    </div>
    
  </div>     
</div>

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

<div class="generator">
  <div class="generator-inner">
    
    <h3>Generator</h3>

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

    <div class="form-group">
      <label for="author">Author</label>
      <input type="text" class="form-control" name="author" value="William Shakespeare" required>
    </div>

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

    <div class="form-group">
      <a href="javascript:getCapture();" class="btn btn-block btn-secondary">DOWNLOAD</a>
      <a href="javascript:" id="download" style="display: none"></a>
    </div>
    
  </div>     
</div>

  • javascript
  • css
  • html2canvas
Share Improve this question asked Aug 9, 2022 at 9:50 Lukas_TLukas_T 2992 gold badges5 silver badges16 bronze badges 1
  • Are you connected to css? – Aref Solaimany Commented Aug 9, 2022 at 10:02
Add a ment  | 

1 Answer 1

Reset to default 6

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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745085319a284104.html

javascripthtml2canvas wont include css background image in downloadStack Overflow

最新回复(0)