用Javascript转化大量图片变成base64靠谱吗?
巴扎黑
巴扎黑 2017-04-11 13:06:47
[JavaScript讨论组]

需求是这样的:客户有有一个csv文档记录着名字+颜色的记录。然后有一个images的文件夹装载着各种高清图片。他要根据csv文档上的记录找出全部符合的图片。然后将图片转化成base64字符串。然后将这些字符串传递给一个叫makePDF的PDF制作插件来创造PDF。目前困境是每次loop那个文件夹然后转化的过程中,浏览器就绝对卡死了。我想大家有没有什么推荐的方法来处理这种问题?

下面是我目前的代码。不用for loop转化一张图片是没问题的。但是一用for就崩溃了。想寻找更好的处理的方法。或者解决的思路也可以( 我知道安全性和性能都是大问题)。 谢谢了。

 function encodeImage(src, callback) {
                        var canvas = document.createElement('canvas'),
                            ctx = canvas.getContext('2d'),
                            img = new Image();

                        img.onload = function () {
                            canvas.width = img.width;
                            canvas.height = img.height;
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            callback(canvas.toDataURL());
                        }
                        img.src = src;;
                    }
                    //                ***************    
                    var folder = "/Project/images/";
                    var list = [];
                    $.ajax({
                        url: folder,
                        success: function (data) {
                            
                            $(data).find("a").attr("href", function (i, val) {
                                if (val.match(/\.(jpe?g|png|gif)$/)) {
                                    val = val.replace(/\\/g, "/");
                                    list.push(val);
                                }
                                                 
                            });

                       
                            
                            for (var i = 1; i < 3; i++) {
                                
                                (function (i) {
                                    setTimeout(function () {
                                        var style = results.data[i][0];
                                        var color = results.data[i][1];
                                        for (var x = 0; x < list.length; x++) {
                                            if (list[x].includes(style) && list[x].includes(color)){
                                                encodeImage(list[i], function (encodedImage) {
                                                    var result_tag = "";
                                                   console.log(result_tag);
                                                });
                                        }}
                                    }, 5000);
                                })(i);
                            }
巴扎黑
巴扎黑

全部回复(3)
阿神

这种数据生成不要浏览器进行。浏览器本身设计是为了用户交互,而不是数据处理。你脚本(非异步脚本)和插件通常会卡住页面线程,导致卡死或超时被浏览器自动杀掉。Java也可以生成PDF,而且能直接处理图片数据,所以这个提交给一个服务器Servlet(甚至可以写成WebService),开线程生成PDF文件,然后生成一个临时URL,供用户手动下载或者PDF插件显示PDF。你可以参考一些Wikipedia里的Download as PDF,它就是类似的逻辑。

阿神

直接在PC里用PDF软件将图片做成Pdf文件不行吗?


主要是不单单只有图片
因为他是做的是一个报告,他要插图片在最后一个列。这个PDF还是动态生成的。你可以想象成这样你在网上看到一个表格然后你筛选了一部分。然后那个表格就会生成PDF。

@mark_xie

我脚得吧,把图片转出base64是多余的。

直接用程序把图片地址插到html中,用chrome打开,右键,打印,保存为PDF。

搞定!~

PHP中文网

使用JavaScript不是不行,但至少要用Node做,并使用异步方式,浏览器不是用跑程序的,是用来浏览网页的。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号