javascript - Can't apply border radius to canvas (html2canvas) - Stack Overflow

admin管理员组

文章数量:1426116

The html div looks fine.

But when I use html2canvas the image displays wrong.

Background

#ref{
    width: 360px;
    height: 360px;
    background: url(/assets/refer/bec.jpg) 0 0 no-repeat;
    background-size: cover;
    overflow: hidden;
    margin-top: 15px;
    margin-left: 70px;
    float: left;
}

I use this for rounding

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

html2canvas

html2canvas(document.getElementById("qqq"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 500,
  height: 500
});

What am I doing wrong? ty

The html div looks fine.

But when I use html2canvas the image displays wrong.

Background

#ref{
    width: 360px;
    height: 360px;
    background: url(/assets/refer/bec.jpg) 0 0 no-repeat;
    background-size: cover;
    overflow: hidden;
    margin-top: 15px;
    margin-left: 70px;
    float: left;
}

I use this for rounding

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

html2canvas

html2canvas(document.getElementById("qqq"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 500,
  height: 500
});

What am I doing wrong? ty

• javascript
• html
• css

Share Improve this question Follow edited Feb 2, 2015 at 11:03 kirqe asked Feb 2, 2015 at 10:56 kirqekirqe 2,47044 gold badges4040 silver badges6464 bronze badges 3

• Hey railsr! I do have the exact same problem, did you find a solution for that? WOuld be much appreciated! Thank ;) – user3877230 Commented Apr 25, 2015 at 13:58
• @user3877230, hi. I decided not to use canvas. – kirqe Commented Apr 25, 2015 at 14:24
• Thanks for your response! See you! – user3877230 Commented Apr 25, 2015 at 19:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

As of my knowledge for html2canvas border radius should be half of the width or height at max.In your case it should be max 75.

.circular {
    background-size: cover;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin: 70px auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

canvas picks up the border-radius fine. Perhaps your content is not covering the edges so you can't see it. Try making sure your content fills the canvas and covers the corners

This is a reported bug on html2canvas (see here) and a fix was merged into the repo.

If you're using release version 0.4.1, edit function calculateCurvePoints as follows:

...
blh = borderRadius[3][0],
    blv = borderRadius[3][1];

      var halfHeight = Math.floor(height / 2);
      tlh = tlh > halfHeight ? halfHeight : tlh;
      tlv = tlv > halfHeight ? halfHeight : tlv;
      trh = trh > halfHeight ? halfHeight : trh;
      trv = trv > halfHeight ? halfHeight : trv;
      brh = brh > halfHeight ? halfHeight : brh;
      brv = brv > halfHeight ? halfHeight : brv;
      blh = blh > halfHeight ? halfHeight : blh;
      blv = blv > halfHeight ? halfHeight : blv;

    var topWidth = width - trh,
    rightHeight = height - brv,
...

Credit for Grom-S for reporting and resolving this.

I had faced problems for ellipse shape while exporting pdf using Html2Canvas, so I was set border-radius as half of (width + height) of shape, so problem solved..

本文标签： javascriptCan39t apply border radius to canvas (html2canvas)Stack Overflow