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：第70744行。

您可以关注cdn。我认为它是最新版本。
https://cdn.quilljs.com/1.3.6/quill.js

Answer 2

我有另一个解决方案。
也许比我想象的要好。
解决方案之前，仅更改样式表的视图。
但是，这次您可以通过画布正确地重写图像数据。
它只有一个缺点，当选择大尺寸图像时，我们需要很长时间来重写图像数据。

首先，包含此库
https://github.com/blueimp/JavaScript-Load-Image

然后重写原始quill.js
注释掉第10744行

// node.setAttribute('src', this.sanitize(value));

并添加以下代码

loadImage(
    value,
    function (canvas) {
      node.setAttribute('src', canvas.toDataURL());
    },
    {
      orientation: true
    }
);

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

2 个答案: