mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

"fixed circle gradient generation - image loading bug"

Browse Source
This commit is contained in:
André Fiedler 2012-03-11 17:12:24 +00:00
parent d1dec8712e
commit 106b5ff214
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Generate.js
View File

@ -27,7 +27,7 @@ var reGradients = [
/* /*
* TODO: Add IE10 vendor prefix (-ms) support * TODO: Add IE10 vendor prefix (-ms) support
* TODO: Add W3C gradient (linear-gradient) support * TODO: Add W3C gradient (linear-gradient) support
* TODO: Add old Webkit -webkit-gradient(radial, ...) support (new Chrome doesn´t support old syntax?!) * TODO: Add old Webkit -webkit-gradient(radial, ...) support
* TODO: Maybe some RegExp optimizations are possible ;o) * TODO: Maybe some RegExp optimizations are possible ;o)
*/ */
_html2canvas.Generate.parseGradient = function(css, bounds) { _html2canvas.Generate.parseGradient = function(css, bounds) {
@ -115,7 +115,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
case '-webkit-gradient': case '-webkit-gradient':
gradient = { gradient = {
type: m1[2], type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions
x0: 0, x0: 0,
y0: 0, y0: 0,
x1: 0, x1: 0,
@ -396,17 +396,20 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
ctxRadial.fillStyle = grad; ctxRadial.fillStyle = grad;
ctxRadial.fillRect(0, 0, di, di); ctxRadial.fillRect(0, 0, di, di);
imgRadial = new Image();
imgRadial.src = canvasRadial.toDataURL();
// transform circle to ellipse
ctx.fillStyle = gradient.colorStops[i - 1].color; ctx.fillStyle = gradient.colorStops[i - 1].color;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry); imgRadial = new Image();
imgRadial.onload = function() { // wait until the image is filled
img.src = canvas.toDataURL();
// transform circle to ellipse
ctx.drawImage(imgRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
img.src = canvas.toDataURL();
}
imgRadial.src = canvasRadial.toDataURL();
} }
} }