Linear-gradient in html2canvas

Question

Linear-gradient in html2canvas

Navigation

#1 by (1 votes)

-1

I am using html2canvas to take a screen from a div that has a linear-gradient background. The page I am developing is interactive, so the colors of the background change, however, when taking the capture goes blank. Does anyone know how I can solve that?

Here is normal, just a div as a target and the scripting call

<div id="test"></div>
<section class="block-cont" id="target">
    <div class="block" id="block" style="background: linear-gradient(90deg, rgb(26, 200, 192), rgb(0, 128, 0), rgb(0, 0, 255), rgb(255, 0, 0));">
    </div>
</section>
<br><br>
<p>Resultado:</p>
<br><br>
<div id="img_p"></div>

<input type="button" value="Tomar screen" onclick="capture()">
<script src="js/html2canvas.js"></script>
<script src="js/jquery.plugin.html2canvas.js"></script>

<script>
    function capture() {
        var date = new Date();
    $('#target').html2canvas({
        onrendered: function (canvas) {
            var image = canvas.toDataURL("image/png");
            var ScreenName = date.getDate()+'-'+(date.getMonth()+1)+'-'+date.getFullYear()+'_'+(date.getHours())+'.'+date.getMinutes()+'.'+date.getSeconds()+'.'+date.getMilliseconds();
            $.ajax({
                url: ajaxurl,
                type: 'post',
                data: {
                    img : image,
                    name : ScreenName
                },
                beforeSend:function (){
                    $('#test').html('Espere...');
                },
                success:function(response){
                    $('#test').html('');
                    $('#img_p').attr('src', response);
                }
            });
        }
    });
    }
</script>

In the ajax, the name that I will put to the image and the data of the image is sent, and the url of the saved image returns to me, this done with php. Everything is fine, since I have saved the created images without problems, even with a normal background, without linear-gradient. The only problem is that ... that html2canvas take into account the linear-gradient.

jquery

asked by JorgeQZ 07.12.2017 в 22:56

source

1 answer

ReferenceError: $ is not defined in Firefox Error Status 500 in java

score 1 · Accepted Answer

As I commented to you, it seems that html2canvas does not know how to render linear-gradient unless you do with exclusive prefixes for each browser .

For example this style renderea in white

.linearGradient {
  width: 200px;
  height: 200px;
  border: solid 1px black;
  background: linear-gradient(red, white);
}

While this one renders well

.linearGradient2 {
   width: 200px;
   height: 200px;
   border: solid 1px black;
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
   background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
   background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
   background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);
}

I left you a fiddle