javascript - How to make html div with text over image downloadable/savable for users? -

-

i have div takes user image , places user text on it. goal users to, after seeing preview , customizing image/text like, able download or save image click of button. possible? here's code: (i'm new html/css please forgive ugly formatting/methods)

html: 

<script `src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>`  <p>dom-rendered</p> <p>&nbsp;</p>  <div id="imagewrap" class="wrap" style="border-style: solid;">   <img src="../images/environment.gif" id="img_prev" width="640" height="640" />   <h3 class="desc">something inspirational</h3> </div>  <div id="canvaswrapper" class="outer">   <p>canvas-rendered (try right-click, save image as!)</p>   <p>or, <a id="downloadlink" download="cat.png">click here download!</a> </div>

css:

.desc { text-align: center; }  .outer, .wrap, .html2canvas, .image_text {   display: inline-block;   vertical-align: top; } .wrap {   text-align: center; } #imagewrap {   background-color: white; }

javascript:

window.onload = function() { html2canvas(document.getelementbyid("imagewrap"), { onrendered: function(canvas) {   canvas.classname = "html2canvas";   document.getelementbyid("canvaswrapper").appendchild(canvas);   var image = canvas.todataurl("image/png");   document.getelementbyid("downloadlink").href = image; }, usecors: true }); }  function changepicture(image) {     var @ = $(image).attr('at');     var newpath = '../images/' + at;     $("#img_prev").attr('src', newpath); }   function readurl(input) {     if (input.files && input.files[0]) {       var reader = new filereader();        reader.onload = function (e) {         $('#img_prev')           .attr('src', e.target.result)           .width(640)           .height(640);       };       reader.readasdataurl(input.files[0]);     }   };     $(document).on("click", '.font-names li a',  function() {           $("#imagewrap h3").css("font-family", $(this).parent().css("font-family"));       $("#new_tile_font_style").val($(this).parent().css("font-family"));    });     $(document).on("click", '.font-sizes li a',  function() {           $("#imagewrap h3").css("font-size", $(this).parent().css("font-size"));       $("#new_tile_font_size").val($(this).parent().css("font-size") + "px");     });     $(document).on("click", '.font-colors li a',  function() {           $("#imagewrap h3").css("color", $(this).parent().css("color"));       $("#new_tile_font_color").val($(this).parent().css("color"));     });     $("#new_tile_quote").on('keyup', function() {    var enteredtext = $("#new_tile_quote").val().replace(/\n/g, "<br>");     $("#imagewrap h3").html(enteredtext);     });

what you're trying accomplish entirely possible using html, js, , css, no server-side code. here simplified demo uses html2canvas library render entire dom element canvas, user can download it.

be sure click "full page" on demo can see whole thing!

window.onload = function() {    html2canvas(document.getelementbyid("imagewrap"), {      onrendered: function(canvas) {        canvas.classname = "html2canvas";        document.getelementbyid("canvaswrapper").appendchild(canvas);        var image = canvas.todataurl("image/png");        document.getelementbyid("downloadlink").href = image;      },      usecors: true    });  }
.desc {    text-align: center;  }  .outer, .wrap, .html2canvas, .image_text {    display: inline-block;    vertical-align: top;  }  .wrap {    text-align: center;  }  #imagewrap {    background-color: white;  }  #wow {    color: red;    display: block;    transform: translate(0px, -12px) rotate(-10deg);  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>  <div class="outer">    <p>dom-rendered</p>    <p>&nbsp;</p>    <div id="imagewrap" class="wrap" style="border-style: solid;">      <img src="https://i.imgur.com/efm76qe.jpg?1" id="img_prev" width="170" />      <h3 class="desc">something <br /><span style="color: blue;">inspirational</span></h3>      <span id="wow">wow!</span>    </div>  </div>  <div id="canvaswrapper" class="outer">    <p>canvas-rendered (try right-click, save image as!)</p>    <p>or, <a id="downloadlink" download="cat.png">click here download!</a>  </div>


Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more