gpt4 book ai didi

javascript - 将 ng-repeat 项目保存为图像

转载 作者:行者123 更新时间:2023-11-30 21:15:10 24 4
gpt4 key购买 nike

我的 html 中有一个 ng-repeat,它创建了大约 750 个 div(我正在为我的产品制作标签),我已经按照我希望的方式设计了它们,我对此很满意,但因为它们相当打印预览看起来一点也不像我的设计。

我想知道在 Angular 中是否可以轻松地遍历每个 ng-repeat 项目并将它们保存为 png?

下面是我的 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>

最佳答案

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?

简答

没有

长答案

另存为 png 在哪里?您可以将它们存储在服务器端或您的电脑上。它与 Angular 无关。例如,如果您要使用 cloudinary作为图像存储,您将能够 transform image resolutions通过更改 URL 进行预览:

enter image description here

enter image description here

此外,一次显示 750 张图片 不是好的做法,您会毁了您的网页。请记住,在 2K 的观察者之后,Web View 性能会降低。

我相信如果您有固定高度的 ng-repeat 项目,我会使用无限滚动。例如看看 Google Material virtual Repeat方法。

其他解决方案

如果你的图片预览很小,你可以转换image to base64它将使您免于调用 750 个 HTTP 请求

关于javascript - 将 ng-repeat 项目保存为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45753659/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com