使用imagemagick和uploadcare來顯示PSD，PDF文件類型的縮略圖

Question

我有一個表格，用戶可以使用uploadcare小部件上傳文件。 上載后，我可以輸出/顯示預覽，但前提是文件類型是jpg，png等圖像。但是我還必須能夠顯示其他文件類型，例如PSD，PDF。 我正在嘗試為此實現imagemagick，但由於小部件使用jquery來獲取圖像CDN，因此混淆了如何將其與uploadcare一起使用。 我在網上找到的大多數教程都是針對php的。

您可以在此小提琴中查看小部件片段： https : //jsfiddle.net/kamela101/e6ac6jb4/

$ = uploadcare.jQuery;
  // Create uploaded image list and append additional form fields to each item
  function installWidgetPreviewMultiple(widget, list) {
    widget.onChange(function(fileGroup) {
      list.empty();
      if (fileGroup) {
        $.when.apply(null, fileGroup.files()).done(function() {

          $.each(arguments, function(i, fileInfo) {
            // display file preview
            var $filename = fileInfo.name;// display file name
            var $fileurl = fileInfo.cdnUrl;// get file url
            var $src = fileInfo.cdnUrl + '-/resize/100x100/filename.jpg';// preview image source, resize to 100X100px and jpeg file type
            // append preview and name and form fields to each file uploaded inside thumb_list 
            list.append(
              $('<li class="thumb_list_item"><img src="' + $src+ '" alt="File Preview" class="preview-img">' + '<h4 class="filename">' + $filename + '</h4>' + '<div class="get-layer-wraper"><ul class="get-layer"><li class="layer-name"><label for="white-layer" class="layer-title">White Layer : </label></li><li><input id="white-layer" name="white-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="adhesive-layer" class="layer-title">Adhesive Layer : </label></li><li><input id="adhesive-layer" name="adhesive-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="block-layer" class="layer-title">Blocking Layer : </label></li><li><input id="block-layer" name="block-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="clear-layer" class="layer-title">Clear Layer : </label></li><li><input id="clear-layer" name="clear-layer[]" class="layer" type="number" value="0"></li><li>PX</li></ul></div></li>').appendTo(".thumb_list")
              );
          });
        });
      }
    });
  }
$(function() {
  $('.upload-area').each(function() {
    installWidgetPreviewMultiple(
      uploadcare.MultipleWidget($(this).children('input')),
      $(this).children('.thumb_list')
    );
  });
});

Answer 1

到目前為止，Uploadcare不支持PSD和PDF預覽功能。 您必須使用允許您執行此操作的第三方服務。