Saving ng-repeat items as images

Question

I have an ng-repeat in my html that creates around 750 divs (i am producing labels for my products), i have designed them how i would like them to look and i am happy with this, but as they are quite big the print preview doesn't look anything like my design.

I want to know if it is possible in Angular to easily iterate through each of the ng-repeat items and save them as a png?

Below is my ng-repeat :

<div class="col-lg-4" ng-repeat="p in productcodes">
         <div class="contact-box" style="padding:0px !important;height:370px;width:650px;">
            <span ui-sref="profile">
               <div class="col-lg-3" style="padding:0px">
                  <img alt="image" class="img m-t-xs img-responsive rotateimage" style="max-width:1000% !important;width:200%" ng-src="">
               </div>
               <div class="col-lg-2" style="padding:0px">
                  <div >
                     <h3 style="margin-top:45px;">Code:</h3>
                     <h3>Colour:</h3>
                     <h3>Item:</h3>
                     <h3>EN Cert:</h3>
                     <h3>Size GB:</h3>
                     <h3>Size SE:</h3>
                     <h3>Size EU:</h3>
                     <h3>Length:</h3>
                  </div>
               </div>
               <div class="col-lg-3" style="padding:0px">
                  <h3 style="margin-top:45px;"><strong>{{p.pcode}}</strong></h3>
                  <strong>
                     <h3>{{p.Colour}}</h3>
                  </strong>
                  <h3>
                  {{p.shortdescription}}</h4>
                  <h3>N/A</h3>
                  <strong>
                     <h3>{{p.Size}}</h3>
                  </strong>
                  <h3>C62</h3>
                  <h3>3XL+</h3>
                  <strong>
                     <h3>{{getsize(p.SizeCode)}}</h3>
                  </strong>
               </div>
               <div class="col-lg-4 col-md-12 col-sm-12" style="padding:0px">
                  <img alt="image" class="img-circle m-t-xs img-responsive"  style="margin-top:60px;width:200%;" src=".{{p.localimg}}">
               </div>
               <div class="clearfix"></div>
            </span>
         </div>
      </div>

The codes quite irrelevent, i just want to save my 750 divs as 750 pngs — Gaz Smith, Aug 18 '17 at 09:57
May this link will help you, https://stackoverflow.com/questions/8025806/user-capture-div-as-image-and-save-to-computer — vipin, Aug 18 '17 at 10:02

Maxim Shoustin · Accepted Answer · 2017-08-18T10:10:34.583

I want to know if it is possible in Angular to easily iterate through each of the ng-repeat items and save them as a png?

Short answer

No

Long answer

Save as png where? You can store them on server side or your comp. Its not related to Angular. For example, if you would use cloudinary as image storage, you will be able to transform image resolutions for preview by changing URL:

http://res.cloudinary.com/demo/image/upload/w_70,h_53,c_scale/turtles.jpg:

http://res.cloudinary.com/demo/image/upload/w_30,h_23,c_scale/turtles.jpg

Further, its not good practice to show 750 images at once, you gonna kill your web page. Keep in mind, after 2K of watchers the web view performance slows down.

I believe if you have fixed height of ng-repeat item, I would use infinite scrolling. For example take a look on Google Material virtual Repeat approach.

Saving ng-repeat items as images

1 Answers1

Short answer

Long answer

Other solution