HTML2Canvas
Not Rendering properly
HTML
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<body id="mybody">
<div id="DIV1" class="bubble" style="left=10px">
<img class="ab" src="../img/logo.png" style="width:250px;">
</div>
<div id="img-out" >
</div>
<input value="Generate Image" id="save-image" type="button"/>
</body>
CSS
#DIV1 {
width:200px;
height:100px;
background-color:red;
overflow:hidden;
}
img{
border-radius:50%;
//If I disable the above line, then the image border-radius fails. Even with the class ab.
}
ab{
border-radius:50%;
}
JavaScript
//<!CDATA[
function save(canvas) {//html2canvas-0.5.0 work with Promise.js
//var mywindow = window.open(canvas.toDataURL(), "print", "height=1000px,width=1000px");
var img = new Image();
img.src = canvas.toDataURL("image/png");
$("#img-out").append(img);
}
$(document).ready(function(){
$('#save-image').click(function () {
html2canvas(document.getElementById('DIV1'), {
allowTaint: true,
logging: true,
taintTest: false,
onrendered: save //0.4.1
})
});
});
//]]>
/*
html2canvas 0.4.1 <http://html2canvas.hertzen.com>
Copyright (c) 2013 Niklas von Hertzen
Released under MIT License
*/
(function(window, document, undefined){
"use strict";
var _html2canvas = {},
previousElement,
computedCSS,
html2canvas;
_html2canvas.Util = {};
_html2canvas.Util.log = function(a) {
if (_html2canvas.logging && window.console && window.console.log) {
window.console.log(a);
}
};
_html2canvas.Util.trimText = (function(isNative){
return function(input) {
return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );
};
})(String.prototype.trim);
_html2canvas.Util.asFloat = function(v) {
return parseFloat(v);
};
(function() {
// TODO: support all possible length values
var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
_html2canvas.Util.parseTextShadows = function (value) {
if (!value || value === 'none') {
return [];
}
// find multiple shadow declarations
var shadows = value.match(TEXT_SHADOW_PROPERTY),
results = [];
for (var i = 0; shadows && (i < shadows.length); i++) {
var s = shadows[i].match(TEXT_SHADOW_VALUES);
results.push({
color: s[0],
offsetX: s[1] ? s[1].replace('px', '') : 0,
...