reactjs - html2canvas border image issue -


i using html2canvas library take screenshot of html view.

but background-image failed load. getting error message error loading background:

here jsfiddle.

window.takescreenshot = function() {      html2canvas(document.getelementbyid("target"), {          onrendered: function (canvas) {              document.body.appendchild(canvas);          },          usecors:true,          logging:true,          allowtaint:true      });  }
#target{      width:300px;      height:160px;      background:lightblue;      color:#fff;      padding:10px;      background-image: url(https://static.pexels.com/photos/20974/pexels-photo.jpg);      background-repeat:no-repeat;      background-position:center center;      -o-background-size: 100%;      -moz-background-size: 100%;      -webkit-background-size: 100%;      background-size: 100%;     height: 100%;  }    #borderimg1 {       border: 10px solid transparent;      padding: 15px;      -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* safari 3.1-5 */      -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* opera 11-12.1 */      border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;  }    #borderimg2 {       border: 10px solid transparent;      padding: 15px;      -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* safari 3.1-5 */      -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* opera 11-12.1 */      border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>      <button onclick="takescreenshot()">to image</button>  <div id="target">        <p>the border-image property specifies image used border around element:</p>  <p id="borderimg1">here, middle sections of image repeated create border.</p>  <p id="borderimg2">here, middle sections of image stretched create border.</p>    <p>here original image:</p><img src="https://www.w3schools.com/cssref/border.png">  <p><strong>note:</strong> internet explorer 10, , earlier versions, not support border-image property.</p>    </div>

image error message

for internet security reasons, trying use image different domain in canvas causes problems. there 2 html2canvas options, usecors , proxy, designed try around problem.

you have create proxy in project , use html2canvas proxy option.

click here view sample proxy created in different programming languages.

usage of proxy in html2canvas(c# example) 

html2canvas(document.body, {     "logging": true, //enable log (use web console errors , warings)     "proxy":"html2canvasproxy.ashx",     "onrendered": function(canvas) {         var img = new image();         img.onload = function() {             document.body.appendchild(img);         };         img.error = function() {             if(window.console.log) {                  window.console.log("not loaded image canvas.todataurl");             } else {                 alert("not loaded image canvas.todataurl");             }         };         img.src = canvas.todataurl("image/png");     } });

Comments

Post a Comment

Popular posts from this blog

python - Operations inside variables -

this question has answer here: evaluating mathematical expression in string 12 answers i want make python script finds maximum possible output using 2 operations. problem says there syntax error @ 2nd last line, in b in there. how can fix it? x = 0 = int(input("1st number:")) c = int(input("2nd number:" )) e = int(input("3rd number:" )) in range(4): if == 0: b = "+" elif == 1: b = "-" elif == 2: b = "/" else: b = "*" j in range(4): if j == 0: d = "+" elif j == 1: d = "-" elif j == 2: d = "/" else: d = "*" k = b c d e print(k) if you're after variables e on single line, couldn...
Read more

Generic Map Parameter java -

i having lot of methods of type: public static list<eduusers> getdetails(class c, map<string, integer> params) { list<eduusers> details = null; session session = hibernateutil.getsessionfactory().opensession(); transaction tx = null; try { tx = session.begintransaction(); criteria cr = session.createcriteria(c); (map.entry<string, integer> entry : params.entryset()) { cr.add(restrictions.eq(entry.getkey(), entry.getvalue())); } details = cr.list(); tx.commit(); } catch (exception asd) { log.debug(asd.getmessage()); if (tx != null) { tx.commit(); } } { session.close(); } return details; } i trying have generic method them , have written far: public static <t> list<t> getdetails(class<t> c, class<t> b) { l...
Read more

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -

what arrayindexoutofboundsexception mean , how rid of it? here code sample triggers exception: string[] name = {"tom", "dick", "harry"}; for(int = 0; i<=name.length; i++) { system.out.print(name[i] +'\n'); } your first port of call should documentation explains reasonably clearly: thrown indicate array has been accessed illegal index. index either negative or greater or equal size of array. so example: int[] array = new int[5]; int boom = array[10]; // throws exception as how avoid it... um, don't that. careful array indexes. one problem people run thinking arrays 1-indexed, e.g. int[] array = new int[5]; // ... populate array here ... (int index = 1; index <= array.length; index++) { system.out.println(array[index]); } that miss out first element (index 0) , throw exception when index 5. valid indexes here 0-4 inclusive. correct, idiomatic for statement here be: for (int index = 0; index <...
Read more