javascript - QuillJS 编辑器 - 在编辑器内或上传前旋转上传图片

Question

我尝试上传 exif 数据中方向参数错误的图片。这会导致图像旋转不正确。

我需要在上传到 quillJS 编辑器之前旋转图像。

我该怎么做？有什么想法吗？

编辑:

.js

app.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
  var toolbarModules = [                
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote'],

            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent

            ['clean'],                                         // remove formatting button

            ['link', 'image', 'video']                         // link and image, video
        ];
  var toolbarFormats = ['bold', 'italic', 'underline', 'strike', 'blockquote', 'clean', 'list', 'link', 'image', 'video'];
  ngQuillConfigProvider.set({
    toolbar: toolbarModules
  }, undefined, 'Placeholder', toolbarFormats, undefined, undefined);
}]);

.html

<ng-quill-editor ng-model="data.description" toolbar="true" link-tooltip="true" image-tooltip="false" toolbar-entries="size bold list bullet italic underline strike align link" error-class="input-error"></ng-quill-editor>

Answer 1

我找到了解决方案。

包括这个， https://github.com/exif-js/exif-js

然后，将以下代码写入 quill.js:第 70744 行。

    node.onload = function () {
      EXIF.getData(node, function() {
        var allMetaData = EXIF.getAllTags(this);
        switch (allMetaData.Orientation) {
          case 1: // The 0th row is at the visual top of the image, and the 0th column is the visual left-hand side. 
            break;
          case 2: // The 0th row is at the visual top of the image, and the 0th column is the visual right-hand side.
            node.style.transform = "rotateY(180deg)";
            break;
          case 3: // The 0th row is at the visual bottom of the image, and the 0th column is the visual right-hand side. 
            node.style.transform = "rotateY(360deg) rotate(180deg)";
            break;
          case 4: // Toe 0th row is at the visual bottom of the image, and the 0th column is the visual left-hand side. 
            node.style.transform = "rotateX(180deg)";
            break;
          case 5: // The 0th row is the visual left-hand side of the image, and the 0th column is the visual top. 
            node.style.transform = "rotateY(180deg) rotate(90deg)";
            break;
          case 6: // The 0th row is the visual right-hand side of the image, and the 0th column is the visual top. 
            node.style.transform = "rotate(90deg)";
            break;
          case 7: // The 0th row is the visual right-hand side of the image, and the 0th column is the visual bottom. 
            node.style.transform = "rotateY(180deg) rotate(270deg)";
            break;
          case 8: // The 0th row is the visual left-hand side of the image, and the 0th column is the visual bottom.
            node.style.transform = "rotate(270deg)";
            break;
          default:
            break;
        }
      });
    } 

quill.js: line 70744.

你可以得到follow cdn。我认为这是最新版本。
https://cdn.quilljs.com/1.3.6/quill.js