0

我正在尝试将一些代码一起破解，以使用 Google Viewer 为使用文件选择器上传的文件生成文档预览。但是，它总是出现空白。无论ConversionDelay我在图像中传递什么值，总是一个空的文档查看器。有谁知道如何让它工作，或者可能知道生成预览的替代方法？

HTML：

<table>
    <tr>
        <td>
            <input type="filepicker-dragdrop" data-fp-apikey="GET_A_FILEPICKER_APIKEY_AT_FILEPICKER.IO" data-fp-button-text="Pick a file" data-fp-drag-text="Or even drop something here" data-fp-option-modal="false" name="dragDrop" id="inputFile" />
        </td>
    </tr>
    <tr>
        <td>
            <div id="dvStatus"></div>
        </td>
    </tr>
    <tr>
        <td>Preview
            <br>
            <div id="imgThumbnail-wrapper">
                <canvas id="preview" height="200px" width="200px" style="width:200px;height:200px;overflow:hidden;"></canvas>
            </div>
<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', $('canvas')[0].toDataURL());" download="MyImage.png" href="#" target="_blank">Download Preview</a>
 <a id="btnCrop" href="#crop">Adjust Preview</a>

        </td>
    </tr>
    <tr id='trCrop'>
        <td>
            <div id="imgSnapShot-wrapper">
                <img id="imgSnapShot">
            </div>
        </td>
    </tr>
</table>

JS：

$(document).ready(function () {


    var snapShotSelector = '#imgSnapShot',
        $snapShot = $(snapShotSelector),
        $canvas = $('#preview'),
        $status = $('#dvStatus');

    $('#inputFile').on("change", function () {

            $snapShot.hide();
            var fileurl = event.files[0].url.replace(/https/, "http");
            $status.html("File upload URL: <a href='" + fileurl +"'>" + fileurl + "</a><br />Converting, please wait...");

            var url = "http://docs.google.com/viewer?url=" + escape(fileurl) + "&embedded=true";

            $("#gPreviewLink").attr("href", url).text(url).show();

            $.ajax({
                type: "POST",
                dataType: 'jsonp',
                url: 'http://do.convertapi.com/Web2Image/json/',
                data: {
                    CUrl: url,
                    ConversionDelay: 1,
                    UserAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36',
                    PageWidth: 960,
                    PageHeight: 1100,
                    Plugins: false

                },
                jsonp: "callback",
                success: loadFileSuccess,
            });


        });

        function loadFileSuccess(data) {
            if (data.Result) {
                $snapShot.attr('src', 'data:image/png;base64,' + data.File).show();
                $status.html($status.html() + "<br />Document converted.");
                if ($.Jcrop(snapShotSelector)) $.Jcrop(snapShotSelector).destroy();


                $snapShot.Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    aspectRatio: 1
                });

                var image = new Image();

                image.onload = function () {
                    // Show image preview

                    var canvas = $canvas[0];
                    var context = canvas.getContext("2d");
                    context.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
                    $(this).remove();

                }

                image.src = 'data:image/png;base64,' + data.File;

            } else {
                $status.html($status.html() + "<br/><span style='color:red'>Error: " + data.Error + "</span>");
            }
        }
       function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                // Show image preview
                var imageObj = $snapShot[0];
                var canvas = $canvas[0];
                var context = canvas.getContext("2d");
                context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
            }
        }
})

http://jsfiddle.net/wJemm/

4

0 回答 0