I wonder about the general approach here... It's good that it can be done all in js, but rerendering the DOM like this feels a bit bad. It will probably not work well for some web sites and might have a performance hit. We have access to the webkit rendered so maybe we should just use that... If we decide or the js approach, we should at least test it pretty well to make sure it's good enough.<span></span><div>
<br>On Monday, 9 September 2013, Suraj K S  wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">I'm able to capture the screen shot of the activity using <a href="http://html2canvas.hertzen.com/" target="_blank">http://html2canvas.hertzen.com/</a> <div>
<br></div><div>It captures the screenshot and returns a canvas.</div>
<div><br></div><div>Now to convert it to a png image I'm using: </div><div><br></div><div><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px">var previewImage = canvas</span><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px">.</span><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px">toDataURL</span><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px">(</span><span style="font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;background-color:transparent;font-size:14px;line-height:18px;margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,0,0)">"ImageWriter/png;base64"</span><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px">);</span></div>

<div><br></div><div><div>The problem with this is that it throws a </div><div><br></div><div><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px">SECURITY_ERR</span><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px">:</span><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px"> DOM </span><span style="font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;background-color:transparent;font-size:14px;line-height:18px;margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(43,145,175)">Exception</span><span style="vertical-align:baseline;line-height:18px;font-size:14px;background-color:transparent;margin:0px;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;border:0px;padding:0px"> </span><span style="font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;background-color:transparent;font-size:14px;line-height:18px;margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,0,0)">18</span></div>

</div><div><span style="font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;background-color:transparent;font-size:14px;line-height:18px;margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,0,0)"><br>

</span></div><div>After reading a bit on this error, got to know that when the canvas has an element whose origin-clean flag is set to false, it would generate this error.</div><div>Not able to understand why exactly this is happening in Sugar though.<br>

<br>Is there a way around this? </div></div>
</blockquote></div><br><br>-- <br>Daniel Narvaez<br><br>