用Javascript转化大量图片变成base64靠谱吗？

问题描述

问 题

需求是这样的：客户有有一个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 = "<img src=\"" + encodedImage + "\"</img>";
                                                   console.log(result_tag);
                                                });
                                        }}
                                    }, 5000);
                                })(i);
                            }

解决方案

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

这篇关于用Javascript转化大量图片变成base64靠谱吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！