使用Javascript动态创建图像文件

时间:2017-05-02 13:27:27

标签: javascript jquery image amazon-s3

我尝试根据从S3 Bucket中检索到的内容动态创建图像文件。让CORS正常工作,这里是我编写的代码:



  /**
     * @name fetchFile
     * @desc Fetch the desired file, and add to our _filesPending array, and update dialog process 
     * @author cgervais
     */
     
    var _filesPending = [];
    var _fileMessageDialog = "Currently downloading {{numberOfFiles}} videos..."; 
    var _filesDownloadedSoFar = 0;
    var _filesDownloaded = []; 
    var downloading = false;
     
     
    function OKDownload(response, fileName) {
        var responsePerfect = {
                link: function() {
                    var _tmpResponse = JSON.parse(response);
                    return _tmpResponse.location;
                }
            };
        $.ajax({
            type: "GET",
            url: responsePerfect.link(),
            data: {},
            success: function(answer) {
                var _tmpFileObject = {
                    fUrl: fileName,
                    fContent: btoa(unescape(encodeURIComponent(answer.trim())))
                };
                _filesDownloaded.push(_tmpFileObject);
                _filesDownloadedSoFar = _filesDownloadedSoFar + 1;
                console.log('Downloaded -- so far: ' + _filesDownloadedSoFar);
            },
            error: function(response, errorCode, errorMessage) {
                console.log('[OKDownload] ' + response + ' - ' + errorCode + ' - ' + errorMessage + ' // ' + responsePerfect.link);
            }
        })
    }
    var _alreadyGeneratedRStrings = []; 
    function generateReasonableString(min, max, fnMax) {
    
        var _genStringSeed = Date.now() + 10;
        var _randomString = '';
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for( var i=min; i < max; i++ )
        {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        
        _randomString = btoa(text + '::' + _genStringSeed); 
        if(_randomString.indexOf('==') > -1) {
            _randomString = _randomString.replace('==','');
        }
        
        if(_randomString.length > fnMax) {
            _randomString = _randomString.substring(0, fnMax);
        }
        
        if(_alreadyGeneratedRStrings.indexOf(_randomString) > -1) { _randomString = generateReasonableString(min, max, fnMax); }
        
        _alreadyGeneratedRStrings.push(_randomString);
        
        return _randomString;
    }
    function httpRawFetch(link) {
        var matched = generateReasonableString(8, 26, 8) + ".jpg"; 
        
        $.ajax({
            type: "GET",
            url: link.href + "&rawlink=yes",
            data: {},
            success: function(answer) {
                if(answer === "") { console.log('[httpRawFetch] Failed fetching ' + link); return; }
                OKDownload(answer, matched);

            },
            error: function(response, errorCode, errorMessage) {
                console.log('[httpRawFetch] Error fetching JSON data from backend server.');
                console.log('[DEBUG] ' + response + ' - ' + errorCode + ' - ' + errorMessage);
                console.log('[DEBUG] Link: ' + link);
            }
        })
    }

    function generateDownloadModal() {
    	var _tmpHTML;

    	// @TODO: generate side modal with jQuery
	}

    function downloadFinished() {
        var zip = new JSZip();
        var _runningCountOfFiles = 0;
        var _runningAddFiles = true;
        for(var i = 0; i < _filesDownloaded.length; i++) {
            _runningAddFiles = true;
            // zip create file ( fileName, fileContent )
            zip.file(_filesDownloaded[i].fUrl, decodeURIComponent(escape(atob(_filesDownloaded[i].fContent))));
            _runningCountOfFiles++;
        }
        
        var recInterval = setInterval(function() {
            if(_runningAddFiles && _runningCountOfFiles == _filesDownloaded.length || _runningCountOfFiles > _filesDownloaded.length) {
                zip.generateAsync({type:"blob"})
                    .then(function(content) {
                        saveAs(content, "recordings.zip");
                        _runningAddFiles = false;
                        clearInterval(recInterval);
                    });
            }
        }, 1000);
    }
    
    setInterval(function() {
        if(downloading) {
            if(_filesDownloadedSoFar === _filesDownloaded.length) {
                downloadFinished();
                downloading = false;
            }
        }
    }, 60000);
    
    function fetchFile(link) {
        if(link === "") {
            alert('Cannot download this file.');
            return;
        }
        _filesPending.push(link);
        httpRawFetch(link);
        downloading = true;
        
    }
&#13;
&#13;
&#13;

问题:

它用文件创建zip,然后下载到我的机器。我打开图像文件,我收到错误(所有这些):&#34;我们无法打开此文件&#34;

我做错了什么?他们是JPG图像。

0 个答案:

没有答案