javascript - Export Resized Image In Canvas To New JSZip Package -

-

i can load image canvas element , resize it, i'm having trouble grabbing resized image.....

var logo = $(".logo"),     loader = $(".load"),     canvas = $(".holder"),     ctx = canvas[0].getcontext("2d");  function displaypreview(file) {   var reader = new filereader();    reader.onload = function(e) {     var img = new image();     img.src = e.target.result;     img.onload = function() {       // x, y, width, height       ctx.drawimage(img, 0, 0, 128, 128);        var dataurl = canvas[0].todataurl("image/png");        var logo = $(".logo");       var imgurl = dataurl;       var imgz = $("<img>");       imgz.attr("src", imgurl);       logo.html("");       logo.append(imgz);     };   };   reader.readasdataurl(file); }

into download package function jszip.

// download zip $(".download").on("click", function(imgurl) {   var zip = new jszip();   zip.file("logo.png", imgurl);   var content = zip.generate({type:"blob"});   // see filesaver.js   saveas(content, "test.zip"); });

any appreciated

var logo = $(".logo"),      loader = $(".load"),      canvas = $(".holder"),      ctx = canvas[0].getcontext("2d");    function displaypreview(file) {    var reader = new filereader();      reader.onload = function(e) {      var img = new image();      img.src = e.target.result;      img.onload = function() {        // x, y, width, height        ctx.drawimage(img, 0, 0, 128, 128);          var dataurl = canvas[0].todataurl("image/png");          var logo = $(".logo");        var imgurl = dataurl;        var imgz = $("<img>");        imgz.attr("src", imgurl);        logo.html("");        logo.append(imgz);      };    };    reader.readasdataurl(file);  }      $(document).ready(function() {    loader.on("change", function(evt) {      var file = evt.target.files[0];      displaypreview(file);        var reader = new filereader();        reader.onload = function(e) {        // download zip        $(".download").on("click", function(imgurl) {          var zip = new jszip();          zip.file("logo.png", imgurl);          var content = zip.generate({type:"blob"});          // see filesaver.js          saveas(content, "test.zip");        });        return false;      };      reader.readasarraybuffer(file);    });      // trigger load image    $(".trigload").click(function() {      $("input").trigger("click");    });  });
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");    .hide {    display: none;  }    .logo {    text-align: center;  }    .fill {    width: 100%;  }    .fr {    float: right;  }
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  <script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>  <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>  <script type="text/javascript" src="http://stuk.github.io/jszip/vendor/filesaver.js"></script>    <input type="file" class="hide load">  <a class="trigload" href="javascript:void(0)">load image</a>  <a class="download fr" href="javascript:void(0)">download</a>  <div class="logo"></div>  <div class="fill" align="center">    <canvas class="holder" width="128" height="128"></canvas>  </div>

in order jszip correctly save dataurl valid png file, seems need add object containing {base64: true}as third argument of zip.file() method, , remove data:image/png;base64, dataurl.

also, assigning click event imgurl variable. may want store in global variable, or check $('.logo>img')[0].src or call once again canvas[0].todataurl().

var logo = $(".logo"),      loader = $(".load"),      canvas = $(".holder"),      ctx = canvas[0].getcontext("2d");    function displaypreview(file) {    var reader = new filereader();      reader.onload = function(e) {      var img = new image();      img.src = e.target.result;      img.onload = function() {        // x, y, width, height        ctx.drawimage(img, 0, 0, 128, 128);          var dataurl = canvas[0].todataurl("image/png");          var logo = $(".logo");        var imgurl = dataurl;        var imgz = $("<img>");        imgz.attr("src", imgurl);        logo.html("");        logo.append(imgz);      };    };    reader.readasdataurl(file);  }      $(document).ready(function() {    loader.on("change", function(evt) {      var file = evt.target.files[0];      displaypreview(file);        var reader = new filereader();        reader.onload = function(e) {        // download zip        $(".download").on("click", function() {          var imgurl = canvas[0].todataurl();    	    var zip = new jszip();          zip.file("logo.png", imgurl.split('base64,')[1],{base64: true});          var content = zip.generate({type:"blob"});  	    // see filesaver.js          saveas(content, "test.zip");           });        return false;      };      reader.readasarraybuffer(file);    });      // trigger load image    $(".trigload").click(function() {      $("input").trigger("click");    });  });
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");    .hide {    display: none;  }    .logo {    text-align: center;  }    .fill {    width: 100%;  }    .fr {    float: right;  }
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  <script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>  <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>  <script type="text/javascript" src="http://stuk.github.io/jszip/vendor/filesaver.js"></script>    <input type="file" class="hide load">  <a class="trigload" href="javascript:void(0)">load image</a>  <a class="download fr" href="javascript:void(0)">download</a>  <div class="logo"></div>  <div class="fill" align="center">    <canvas class="holder" width="128" height="128"></canvas>  </div>


Comments

Post a Comment

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

-
Image
i have similar problem described in how prevent numbers being changed exponential form in python matplotlib figure : i don't want (in special case) weird scientific formatting of axis. problem different have problem @ z -axis. 2-d plots can use ax.get_yaxis().get_major_formatter().set_useoffset(false) . , there no function ax.get_zaxis() what use format z -axis same way? edit: example: from mpl_toolkits.mplot3d import axes3d import numpy np import sys import matplotlib import matplotlib.pyplot pyplot def func(xi, ti): res = 10e3 + np.cos(ti) * np.sin(xi) return res if __name__ == '__main__': timespacing = 20 timestart = 0 timeend = 1 time = np.linspace(timestart, timeend, timespacing) widthspacing = 50 widthstart = 0 widthend = 3 width = np.linspace(widthstart, widthend, widthspacing) reslist = [] matplotlib.rcparams['legend.fontsize'] = 10 fig = pyplot.figure() ax = fig.gca(projection = '3d...
Read more

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

-
i install web server database on raspberry pi (little computer). computer has 1gb ram. i want know best combination: linux distribution , web server , dbms run local server multiple users minimal latency, use php on server. , best settings performance , not have bugs (memory usage, disable plugin, disable service, etc)? i thought light debian , lighttpd server , sqlite database. solution? i think lighttpd + sqlite great choice. linux distro, debian @ centos or tiny core linux , although i'm not sure of compatibility pi. obviously, can't go wrong raspbian if want use in production , more stable performance, few more pi's , set them in cluster .
Read more

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -

-
i developing app in xamarin android. have splash screen serialize class , pass mainactivity using intent . when try deserialize in mainactivity error message : "serializationexception unable find constructor use types" serialization : void loaddata() { currency currency = new currency(this); intent = new intent(this, typeof(mainactivity)); intent.putextra("currency", newtonsoft.json.jsonconvert.serializeobject(currency)); startactivity(intent); } deserialization : cur = newtonsoft.json.jsonconvert.deserializeobject<currency> (intent.getstringextra("currency")); // error here class constructor : public currency(context context) { thiscontext = context; } i began experiencing problem after added parameter context context constructor. has caused this? how can solve it? possible serialize/deserialize class has parameters? you need have empty constructor in currency class in order deserialize it. ...
Read more