I'm trying to use HTML2Canvas to render the contents of a div. Here is the code:
var htmlSource = $('#potenzial-page')[0];
$('#btn').on("click", function() {
html2canvas(htmlSource).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
});
I'm using v5 beta 3.
When this code runs, it only renders what is visible on the screen. The #potenzial-page div is essentially the entire page, minus the header and footer. All content in this div is visible by scrolling (there are some hidden elements, but I do not want the hidden elements visible in the image.)
I cannot find what's wrong or why it won't save the entire div. I should also note that it appears the image is as tall as the div but only partially visible.
To give an example of what I mean, here is a comparison:
The left is how HTML2Canvas should render the div. The right shows how it renders when it runs the code above. The right image is what's visible in my browsers screen.
I did try adding the height option but it doesn't make a difference.
UPDATE
If I scroll to the very top of the page then run the script it will render the entire div as it should.
How do I render the div without having to scroll to the top?
I hope thet help you
html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
A solution that worked for me was to add the following to my css:
.html2canvas-container { width: 3000px !important; height: 3000px !important; }
It prevents html2canvas from limiting the rendering to the viewable area (which seems to be the default).
See here: https://github.com/niklasvh/html2canvas/issues/117
I used window.scrollTo()in my case and it worked for me.
Below is a sample code
$('#btn').on("click", function() {
window.scrollTo(0,0);
html2canvas(htmlSource).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});
I just did something like this and it worked for me:
html2canvas(document.querySelector("#capture2image"), {
allowTaint: true,
useCORS: true,
logging: false,
height: window.outerHeight + window.innerHeight,
windowHeight: window.outerHeight + window.innerHeight,
You can add in scroll position as a variable in html2canvas which removes the need to scroll the page.
html2canvas(document.querySelector("#your-element"), {
scrollX: 0,
scrollY: 0
}).then(function(canvas) {
If you have a height set to the div you want to turn to a canvas - you need to remove that before actually taking the snapshot. Otherwise it will just cut it off because of that height.
$(".yourElemThatHasSomeHeightSet").css("height", "");
Then you will notice that scrolling down - will still cut your document.
Simply do a:
$("html, body").scrollTop(0);
before taking the snapshot.
This is how I've achieved in Reactjs.
Main problem were ratio and scale
If you do a quick window.devicePixelRatio, it's default value is 2 which was causing the half image issue.
const printDocument = () => {
const input = document.getElementById('divToPrint');
const divHeight = input.clientHeight
const divWidth = input.clientWidth
const ratio = divHeight / divWidth;
html2canvas(input, { scale: '1' }).then((canvas) => {
const imgData = canvas.toDataURL('image/jpeg');
const pdfDOC = new jsPDF("l", "mm", "a0"); // use a4 for smaller page
const width = pdfDOC.internal.pageSize.getWidth();
let height = pdfDOC.internal.pageSize.getHeight();
height = ratio * width;
pdfDOC.addImage(imgData, 'JPEG', 0, 0, width - 20, height - 10);
pdfDOC.save('summary.pdf'); //Download the rendered PDF.
});
}
window.scrollTo(0,0);
Add this works for me.
for people dont wanna hacky a way for scroll problem.: dom-to-image
you can scroll while you are snapshotting image
and its much more faster (70x according to this blog ).
blog: https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf
in the blog it mentions html-to-image. it is fork of dom-2-image. i used dom-to-image (ancestor , original one).
var node = document.getElementById('my-node');
domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
The following code worked for me:
window.scrollTo(0, 0);
html2canvas(htmlRef, {
scrollX: -window.scrollX,
scrollY: -window.scrollY,
windowWidth: document.documentElement.offsetWidth,
windowHeight: htmlRef.scrollHeight,
}).then((canvas) => {
const img = new Image();
const imgData = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
const pdf = new jsPDF("p", "mm", "a4");
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, "JPEG", 0, 0, pdfWidth, pdfHeight);
pdf.save();
});
<div #potentialContainer id="potentialContainer" class="potentialContainer" style="height: auto;">
some large content here--------------------
</div>
import html2canvas from 'html2canvas';
downloadImage() {
html2canvas(document.querySelector('#potentialContainer'), {
logging: true,
allowTaint: false,
useCORS: true,
width: document.querySelector('#potentialContainer').scrollWidth,
height: section.scrollHeight,
scrollX: -window.scrollX,
scrollY: -window.scrollY,
}).then((canvas) => {
var imgWidth = 210;
var pageHeight = 290;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var imgData = encodeURIComponent(pageData);
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
doc.setLineWidth(5);
doc.setDrawColor(255, 255, 255);
doc.rect(0, 0, 210, 295);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
doc.setLineWidth(5);
doc.setDrawColor(255, 255, 255);
doc.rect(0, 0, 210, 295);
heightLeft -= pageHeight;
}
doc.save('file.pdf');
});
}
Note:- It is important to add style height:auto
The above code will convert a large image to a multipage pdf
Another React Approach...
On your submit button on click set the document height dynamically, then call html2canvas using document.body as the first argument
<button onClick={() => {
var body = document.body,
html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
document.body.style.height = `${height}px`
html2canvas(document.body).then(function (canvas) {
var imgData = canvas.toDataURL('image/pdf')
var doc = new jsPDF('p', 'mm', [canvas.width, canvas.height])
doc.addImage(imgData, 'PDF', 10, 10, canvas.width, canvas.height)
doc.save('name-of-pdf.pdf')
});
}}>Submit</button>
This will set the html height of public/index.html which html2canvas seems to render from (i.e. not the "root" div).
This works for me:
const input = document.getElementById('fragmentForPDF');
// This row fixed problem
input.parentNode.style.overflow = 'visible';
html2canvas(input)...
window.scrollTo(0, 0); // this will help to print if div hidden or on mobile screen
html2canvas(document.getElementById("my_div_img")).then(function (canvas)
{
//for give white BG
var context = canvas.getContext('2d');
context.save();
context.globalCompositeOperation = 'destination-over';
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.restore();
var imgData = canvas.toDataURL('image/jpeg', 1);
//console.log(imgData);
}
This worked for me:
html2canvas(el, {
width: el.scrollWidth,
height: el.scrollHeight,
})
See here for the source.
document.getElementById("dld_report").addEventListener("click", function() {
// Make sure the area you want to take screenshot is visible in CSS
document.querySelector('#boundary').style.overflow = 'visible';
html2canvas(document.querySelector('#boundary'), {
// Set the height of screenshot image same as page hieght
height: window.outerHeight + window.innerHeight,
}).then(function(canvas) {
saveAs(canvas.toDataURL(), 'report.png');
});
});
// dld_report -> button to trigger the screenshot
Set style overflow = "visible" and height were the key to make this happen.
General advice regarding html2canvas Try and set height of html to 100%.
How can I get base64 with image inside of svg? Check this Fiddle that I got from another question. If you see the second graphic, its not generating the image that overlays the bar.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_survey'));
$("[fill='#FFFFFF']").each(function( index, element ) {
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS(null,'x',element.x.baseVal.value);
svgimg.setAttributeNS(null,'y',element.y.baseVal.value);
svgimg.setAttributeNS(null,'width',element.width.baseVal.value);
svgimg.setAttributeNS(null,'height',element.height.baseVal.value);
svgimg.setAttributeNS(null,'preserveAspectRatio','none');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', '${application.contextPath}/images/textura/patt.gif');
$(element).parent().append(svgimg);
});
$('#test').val(chart.getImageURI())
In order to save this svg to a png, which keeps the linked <image> then you'll have to encode each <image>'s href to a dataURL first.
Edit
I rewrote the original snippets (which can still be found in the edit history).
I changed the <image> tags to <use>. This results in a much smaller memory usage.
I also added a fallback for IE11, which accepts to encode the external image to data URL, but still fails to convert svg to png via canvas.
The fallback will replace the destination <img>tag, with the canvas. The later can be saved by user with a right click.
A few caveats :
It doesn't work in Safari 7, and maybe in other outdated webkit browsers. That's a strange bug, since it does work like a charm in localhost, but won't on any other network (even on my home network, using 192.168.xxx).
IE 9 & IE 10 will fail to convert the external images to data URL, CORS problem.
// What to do with the result (either data URL or directly the canvas if tainted)
var callback = function(d, isTainted) {
if (!isTainted) {
$('#chartImg')[0].src = d;
} else
$('#chartImg')[0].parentNode.replaceChild(d, $('#chartImg')[0]);
};
// The url of the external image (must be cross-origin compliant)
var extURL = 'https://dl.dropboxusercontent.com/s/13dv8vzmrlcmla2/tex2.jpg';
google.load('visualization', '1', {
packages: ['corechart']
})
var encodeCall = getbase64URI.bind(this, extURL, callback);
google.setOnLoadCallback(encodeCall);
// Google Chart part
function drawVisualizationDaily(imgUrl, callback, isTainted) {
var data = google.visualization.arrayToDataTable([
['Daily', 'Sales'],
['Mon', 4],
['Tue', 6],
['Wed', 6],
['Thu', 5],
['Fri', 3],
['Sat', 7],
['Sun', 7]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data, {
title: "Daily Sales",
width: 500,
height: 400,
hAxis: {
title: "Daily"
}
});
// Link to chart's svg element
var svgNode = chart.ea.querySelector('svg');
// Create a symbol for our image
var symbol = document.createElementNS('http://www.w3.org/2000/svg', 'symbol');
// An svg wrapper to allow size changing with <use>
symbol.setAttributeNS(null, 'viewBox', '0,0,10,10');
symbol.setAttributeNS(null, 'preserveAspectRatio', 'none');
symbol.id = 'background';
// And the actual image, with our encoded image
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
img.setAttributeNS(null, 'preserveAspectRatio', 'none');
img.setAttributeNS(null, 'width', '100%');
img.setAttributeNS(null, 'height', '100%');
img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', imgUrl);
symbol.appendChild(img);
svgNode.appendChild(symbol);
var blueRects = $("[fill='#3366cc']");
var max = blueRects.length - 1;
blueRects.each(function(index, element) {
var svgimg = document.createElementNS('http://www.w3.org/2000/svg', 'use');
svgimg.setAttributeNS(null, 'x', element.x.baseVal.value);
svgimg.setAttributeNS(null, 'y', element.y.baseVal.value);
svgimg.setAttributeNS(null, 'width', element.width.baseVal.value);
svgimg.setAttributeNS(null, 'height', element.height.baseVal.value);
svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#background');
svgNode.appendChild(svgimg);
if (index === max && !isTainted) // no need to call it if we don't have our dataURL encoded images
// a load event would be better but it doesn't fire in IE ...
setTimeout(exportSVG.bind(this, svgNode, callback, isTainted), 200);
});
}
function exportSVG(svgNode, callback, isTainted) {
var svgData = (new XMLSerializer()).serializeToString(svgNode);
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = svgNode.getAttribute('width');
canvas.height = svgNode.getAttribute('height');
canvas.getContext('2d').drawImage(this, 0, 0);
var data, isTainted;
try {
data = canvas.toDataURL();
} catch (e) {
data = canvas;
isTainted = true;
}
callback(data, isTainted);
}
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
}
// A simple function to convert an images's url to base64 data URL
function getbase64URI(url, callback) {
var img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function() {
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
c.getContext('2d').drawImage(this, 0, 0);
var isTainted;
try {
c.toDataURL();
} catch (e) {
isTainted = true;
}
// if the canvas is tainted, return the url
var output = (isTainted) ? url : c.toDataURL();
drawVisualizationDaily(output, callback, isTainted);
}
img.src = url;
}
svg { border: 1px solid yellow; }
img { border: 1px solid green; }
canvas { border: 1px solid red; }
<script src="http://www.google.com/jsapi?.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="visualization"></div>
Right-click this image to save it:
<br>
<img id="chartImg" />
This example creates an svg container populated by an image. In my example the image is an svg image but you should be able to put in any type of image (jpg, png, gif). The container is created first then the image is created inside the container.
// create svg
var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttribute('class','shadowed handle_icon_sensors');
svg.setAttribute('height','25');
svg.setAttribute('width','25');
svg.setAttribute('id',idAttr);
svg.setAttribute('z-index','21000');
document.getElementById("zones_container").appendChild(svg);
// create svg image
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttribute('height','25');
svgimg.setAttribute('width','25');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','svg/icon_sensorYellow.svg');
svgimg.setAttribute('x','0');
svgimg.setAttribute('y','0');
document.getElementById(idAttr).appendChild(svgimg);
Note, When converted to src of img element retained blue background-color .
Try , after .each()
// set namespace attributes
var svg = $("svg").attr({
"xmlns": "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink"
})[0];
// create `data URI` of `svg`
var dataURI = "data:image/svg+xml;charset=utf-8;base64," + btoa(svg.outerHTML.trim());
// post `svg` as `data URI` to server
$.post("/path/to/server/", {
html: dataURI
}, "html")
.then(function (data) {
// do stuff
// `svg` `data URI`
console.log(data);
}, function (jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
});
jsfiddle http://jsfiddle.net/R8A8P/58/
this html worked in react
<a
href={chart.getImageURI()}
download="chart.png">
getImage
</a>
I'm creating a blurred background from an image in canvas with this script: http://www.quasimondo.com/BoxBlurForCanvas/FastBlur2Demo.html
You can see a demo on my page here: http://www.cphrecmedia.dk/musikdk/stage/prelisten.php
I find the speed a little bit slow and I know I can make it faster by only make 1 iterations, but its not that pretty then. Can I somehow use WEbGL or any other kind of tech to speed up the canvas for this?
This is the stackbox-code:
var mul_table=[1,171,205,293,57,373,79,137,241,27,391,357,41,19,283,265,497,469,443,421,25,191,365,349,335,161,155,149,9,278,269,261,505,245,475,231,449,437,213,415,405,395,193,377,369,361,353,345,169,331,325,319,313,307,301,37,145,285,281,69,271,267,263,259,509,501,493,243,479,118,465,459,113,446,55,435,429,423,209,413,51,403,199,393,97,3,379,375,371,367,363,359,355,351,347,43,85,337,333,165,327,323,5,317,157,311,77,305,303,75,297,294,73,289,287,71,141,279,277,275,68,135,67,133,33,262,260,129,511,507,503,499,495,491,61,121,481,477,237,235,467,232,115,457,227,451,7,445,221,439,218,433,215,427,425,211,419,417,207,411,409,203,202,401,399,396,197,49,389,387,385,383,95,189,47,187,93,185,23,183,91,181,45,179,89,177,11,175,87,173,345,343,341,339,337,21,167,83,331,329,327,163,81,323,321,319,159,79,315,313,39,155,309,307,153,305,303,151,75,299,149,37,295,147,73,291,145,289,287,143,285,71,141,281,35,279,139,69,275,137,273,17,271,135,269,267,133,265,33,263,131,261,130,259,129,257,1];var shg_table=[0,9,10,11,9,12,10,11,12,9,13,13,10,9,13,13,14,14,14,14,10,13,14,14,14,13,13,13,9,14,14,14,15,14,15,14,15,15,14,15,15,15,14,15,15,15,15,15,14,15,15,15,15,15,15,12,14,15,15,13,15,15,15,15,16,16,16,15,16,14,16,16,14,16,13,16,16,16,15,16,13,16,15,16,14,9,16,16,16,16,16,16,16,16,16,13,14,16,16,15,16,16,10,16,15,16,14,16,16,14,16,16,14,16,16,14,15,16,16,16,14,15,14,15,13,16,16,15,17,17,17,17,17,17,14,15,17,17,16,16,17,16,15,17,16,17,11,17,16,17,16,17,16,17,17,16,17,17,16,17,17,16,16,17,17,17,16,14,17,17,17,17,15,16,14,16,15,16,13,16,15,16,14,16,15,16,12,16,15,16,17,17,17,17,17,13,16,15,17,17,17,16,15,17,17,17,16,15,17,17,14,16,17,17,16,17,17,16,15,17,16,14,17,16,15,17,16,17,17,16,17,15,16,17,14,17,16,15,17,16,17,13,17,16,17,17,16,17,14,17,16,17,16,17,16,17,9];function stackBoxBlurCanvasRGB(ctxt,top_x,top_y,width,height,radius,iterations){if(isNaN(radius)||radius<1)return;radius|=0;if(isNaN(iterations))iterations=1;iterations|=0;if(iterations>3)iterations=3;if(iterations<1)iterations=1;var imageData;try{try{imageData=ctxt.getImageData(top_x,top_y,width,height);}catch(e){try{netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");imageData=ctxt.getImageData(top_x,top_y,width,height);}catch(e){alert("Cannot access local image");throw new Error("unable to access local image data: "+e);return;}}}catch(e){alert("Cannot access image");throw new Error("unable to access image data: "+e);}
var pixels=imageData.data;var x,y,i,p,yp,yi,yw,r_sum,g_sum,b_sum,r_out_sum,g_out_sum,b_out_sum,r_in_sum,g_in_sum,b_in_sum,pr,pg,pb,rbs;var div=radius+radius+1;var w4=width<<2;var widthMinus1=width-1;var heightMinus1=height-1;var radiusPlus1=radius+1;var stackStart=new BlurStack();var stack=stackStart;for(i=1;i<div;i++){stack=stack.next=new BlurStack();if(i==radiusPlus1)var stackEnd=stack;}
stack.next=stackStart;var stackIn=null;var mul_sum=mul_table[radius];var shg_sum=shg_table[radius];while(iterations-->0){yw=yi=0;for(y=height;--y>-1;){r_sum=radiusPlus1*(pr=pixels[yi]);g_sum=radiusPlus1*(pg=pixels[yi+1]);b_sum=radiusPlus1*(pb=pixels[yi+2]);stack=stackStart;for(i=radiusPlus1;--i>-1;){stack.r=pr;stack.g=pg;stack.b=pb;stack=stack.next;}
for(i=1;i<radiusPlus1;i++){p=yi+((widthMinus1<i?widthMinus1:i)<<2);r_sum+=(stack.r=pixels[p++]);g_sum+=(stack.g=pixels[p++]);b_sum+=(stack.b=pixels[p]);stack=stack.next;}
stackIn=stackStart;for(x=0;x<width;x++){pixels[yi++]=(r_sum*mul_sum)>>>shg_sum;pixels[yi++]=(g_sum*mul_sum)>>>shg_sum;pixels[yi++]=(b_sum*mul_sum)>>>shg_sum;yi++;p=(yw+((p=x+radius+1)<widthMinus1?p:widthMinus1))<<2;r_sum-=stackIn.r-(stackIn.r=pixels[p++]);g_sum-=stackIn.g-(stackIn.g=pixels[p++]);b_sum-=stackIn.b-(stackIn.b=pixels[p]);stackIn=stackIn.next;}
yw+=width;}
for(x=0;x<width;x++){yi=x<<2;r_sum=radiusPlus1*(pr=pixels[yi++]);g_sum=radiusPlus1*(pg=pixels[yi++]);b_sum=radiusPlus1*(pb=pixels[yi]);stack=stackStart;for(i=0;i<radiusPlus1;i++){stack.r=pr;stack.g=pg;stack.b=pb;stack=stack.next;}
yp=width;for(i=1;i<=radius;i++){yi=(yp+x)<<2;r_sum+=(stack.r=pixels[yi++]);g_sum+=(stack.g=pixels[yi++]);b_sum+=(stack.b=pixels[yi]);stack=stack.next;if(i<heightMinus1)yp+=width;}
yi=x;stackIn=stackStart;for(y=0;y<height;y++){p=yi<<2;pixels[p]=(r_sum*mul_sum)>>>shg_sum;pixels[p+1]=(g_sum*mul_sum)>>>shg_sum;pixels[p+2]=(b_sum*mul_sum)>>>shg_sum;p=(x+(((p=y+radiusPlus1)<heightMinus1?p:heightMinus1)*width))<<2;r_sum-=stackIn.r-(stackIn.r=pixels[p]);g_sum-=stackIn.g-(stackIn.g=pixels[p+1]);b_sum-=stackIn.b-(stackIn.b=pixels[p+2]);stackIn=stackIn.next;yi+=width;}}}
ctxt.putImageData(imageData,top_x,top_y);}
function BlurStack(){this.r=0;this.g=0;this.b=0;this.a=0;this.next=null;}
And this is how its activated on each page:
<script type='text/javascript'>window.onload=function(){
//create image object
var imageObj = new Image();
//when image is finished loading
imageObj.onload = function() {
//get size
var w = imageObj.naturalWidth;
var h = imageObj.naturalHeight;
var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
//create virtual canvas
var ctx = canvas.getContext('2d');
//draw the image on it
ctx.drawImage(imageObj, 0, 0);
//apply the blur
stackBoxBlurCanvasRGB(ctx, 0, 0, w, h, 11, 2);
//add grey filter
ctx.fillStyle='rgba(64,64,64,0.4)';
ctx.fillRect(0,0,w,h);
//and display it in 1 second using a fade
var $canvas = $(canvas)
$("#bgc").append(canvas);
$canvas.show();
var canvasRatio = $canvas.width()/$canvas.height();
var windowRatio = $(window).width()/$(window).height();
if (canvasRatio > windowRatio){
$canvas.css({
"height": "100%",
"width" : "auto"
});
} else {
$canvas.css({
"width": "100%",
"height": "auto"
});
}
$canvas.css({
"marginLeft" : -$canvas.width()/2+"px",
"marginTop" : -$canvas.height()/2+"px"
});
window.onresize = function(){
var canvasRatio = $canvas.width()/$canvas.height();
var windowRatio = $(window).width()/$(window).height();
if (canvasRatio > windowRatio){
$canvas.css({
"height": "100%",
"width" : "auto"
});
} else {
$canvas.css({
"width": "100%",
"height": "auto"
});
}
$canvas.css({
"marginLeft" : -$canvas.width()/2+"px",
"marginTop" : -$canvas.height()/2+"px"
});
}
};
//set the source of the image from the data source
imageObj.src = $('#bgc').data("src");
}
</script>
Maybe have a look at Pixi.js it is a library that wraps canvas and will use either the 2D context or the WebGL context based on browser capabilities. It has a built in Blur Filter that could possibly achieve the effect you are after http://www.goodboydigital.com/pixijs/docs/classes/BlurFilter.html
If you are working with WebKit based browsers there is a draft implementation of CSS filters that should be fast https://developer.mozilla.org/en-US/docs/Web/CSS/filter