Module not found: Error: Can't resolve 'fabric/dist/fabric.require'

Hi,

I am using this TUI-ImageEditor to manipulate my image. My input format id dataURI. So I don't need the load button as in samples to upload the image.

Is there any way to load DataUrl in canvas instead of sampleImage.png

I could see I need to modify this method:

imageEditor.loadImageFromURL

Can you please tell me, how to achieve this?

Thanks!
Anjali Bansal

Hi,

I'm trying to incorporate just the Cropzone pieces into my own React app, but am having difficulties. For some reason, when _getCoordinates is hit, canvasEl.getWidth() and canvasEl.getHeight() come back as 1. This essentially draws a small dot it's everything is only 1 square pixel in size.

Have you had any issues like this? When debugging through the core of fabricjs and going through the call stack, looking at this line (12553): this.drawObject(this._cacheContext, noTransform); - I see this._cacheContext being very different than the ctx in the call stack line before (line 6862): objects[i] && objects[i].render(ctx);

In the render line above (6862), the ctx seems to be correct and is pointing to the canvas we need it to point to. However, by the time line 12553 is hit, the _cacheContext is different.

Wondering if you've seen this type of issue?

Version

3.2.0

Development Environment

MacOS 10.12.6
Chrome Version 68.0.3440.106 (Official Build) (64-bit)

Current Behavior

Using editorInstance.rotate(degrees) causes entire image/canvas to disappear. The initial image is retrieved from URL on load. I can save and reload images just fine. I can also add text, draw, etc without issue. However using .rotate() immediately makes the image disappear. The number of degrees is irrelevant and reversing the rotation doesn't make it reappear.

Hi
After the npm install --save tui-image-editor The Fabric Js can't found Http and Https modules.

I use: Node js: 8.11.1, NPM 6.1.0, Angular 6.

Installed for Fabric: https://www.npmjs.com/package/@types/fabric

Error code: ERROR in 'node_modules/fabric/dist/fabric.require.js
Module not found: Error: Can't resolve 'http' in 'node_modules\fabric\dist'
ERROR in 'node_modules/fabric/dist/fabric.require.js'
Module not found: Error: Can't resolve 'https' in 'node_modules\fabric\dist'

Import from Node modules: import * as ImageEditor from 'tui-image-editor';

Call the editor: const instance = new ImageEditor(document.querySelector('#tui-image-editor'), { cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } });
`
Any idea what the problem?

bower install 명령어로 downlaod 후 특정 위치에 injection을 하기 위해 아래 설정이 bower.json에 필요합니다.

{
  "name": "tui-image-editor",
  "authors": [
    "NHNEnt FE Development Team <[email protected]>"
  ],
  "description": "",
  "license": "MIT",
  "main": [
    "image-editor.js"
  ],
  "ignore": [
    "**/.*",
    "samples",
    "src",
    "index.js",
    "karma.*",
    "gulpfile.js",
    "jsdoc-conf.json",
    "package.json",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "tui-code-snippet": "~1.2.0",
    "jquery": "~1.8.3",
    "fabric": "~1.6.3"
  },
  "devDependencies": {
    "tui-component-colorpicker": "~1.0.1",
    "filesaver": "*"
  }
}

when I add two image object on canvas then the side corners and first image object is not selectable so I can not perform resize and rotate operation on the previously added object.

Version

latest (3.2.0 I think)

Development Environment

Google Chrome

Current Behavior

Using CDN

But got the following error from the console.

tui-image-editor.js:4453 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at keyMirror (tui-image-editor.js:4453)
    at Object.<anonymous> (tui-image-editor.js:4377)
    at __webpack_require__ (tui-image-editor.js:36)
    at Object.<anonymous> (tui-image-editor.js:4233)
    at __webpack_require__ (tui-image-editor.js:36)
    at Object.<anonymous> (tui-image-editor.js:4172)
    at __webpack_require__ (tui-image-editor.js:36)
    at Object.<anonymous> (tui-image-editor.js:3819)
    at __webpack_require__ (tui-image-editor.js:36)
    at Object.module.exports (tui-image-editor.js:604)

Expected Behavior

should load correctly?

이미지 파일이 아닌 파일을 로드하면 빈 화면이 나오게 됩니다.
그리고 나서 다시 일반 이미지 파일을 로드하면
로드가 되지 않습니다.

샘플 페이지에서 테스트 하였습니다.

In ionic mobile application, I have used it but the canvas element is not shown and i also inspect it but I didn't find any error in console?

Hi there,

Wondering what the best method is to introduce crop ratios? For example, I would like to possibly incorporate different crop ratios using your library (1x1, 2x3, etc etc), so the crop zone is fixed based on the ratio selected.

What do you feel is the best way to tackle this? Possibly making the proper calculations in _calcRectDimensionFromPoint()?

Thanks

Hi.
Please, make localization!

Let me tell you something as non developer. I am spending lot of time into Javascript OS ecosystem, and what is the biggest miss on every OS Repo is live demo link.

Is it to hard deploy app and have live working demo, which can see lot of entrepreneurs, marketing, design and other no technical people ? Which can directly impact of having your OS project getting even more exposure, PR's or paid work ?

Whatever, this is my honest and direct feedback to you and all other open source developers.

Put the Demo of your project online! .

Peace,

Version

3.0.0

Development Environment

Chrome 60

Current Behavior

tui image editor의 setObjectPosition() 동작에 대해 문의드립니다.
image object를 추가 한 후 setObjectPosition() API를 통해 위치를 변경하였을 때
변경된 위치에서 object가 선택되지 않고, 변경되기 전 위치에서 object가 선택됩니다.

동작은 아래 순서로 수행한 것입니다.

1. addImageObject()로 이미지 추가
2. 추가한 object를 비활성(deactivate) 상태로 변경 (활성상태일 때도 동일한 현상 발생)
3. setObjectPosition()로 이미지 이동 ({x: 100, y: 100, originX: 'center', originY: 'center'})
4. 이동한 위치에서 object 활성화(activate) 안됨, 이동전 위치를 클릭하면 활성화(activate) 됨

imageEditor.setObjectPosition(activeObjectId, {
  x: 200,
  y: 300,
  originX: 'center',
  originY: 'center'
});

// And click it

Expected Behavior

이동한 위치에 마우스 클릭하였을 때도 활성화 되어야 함.

Can you please tell me how you can change the canvas width height according to background image load with its uppar canvas and lower canvas and rest of canvas container was 100% both height and width.

Regards

기존 div.image-wrapper와 canvas의 높이와 넓이가 고정될경우
사용자의 환경 및 viewport 크기에 따라 화면 노출이 잘리거나 과다하게 작은 영역만 표시되어 불편함이 초래될 수 있을 듯 합니다.
특정 scale의 factor로 zoom In out 을 처리해주는 기능이 필요할 듯 합니다.
window.resize에 대한 처리는 외부에서 하는 게 좋을 것 같구요

/**
 * Get data url
 * @param {string} type - A DOMString indicating the image format. The default type is image/png.
 * @returns {string} A DOMString containing the requested data URI
 * @example
 * imgEl.src = imageEditor.toDataURL();
 *
 * imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => {
 *      imageEditor.addImageObject(imgUrl);
 * });
 */
toDataURL(type) {
    return this._graphics.toDataURL(type);
}

/**
 * To data url from canvas
 * @param {string} type - A DOMString indicating the image format. The default type is image/png.
 * @returns {string} A DOMString containing the requested data URI.
 */
toDataURL(type) {
    return this._canvas && this._canvas.toDataURL(type);
}

But if i open this._canvas.toDataURL (fabric.js):

/**
 * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
 * @param {Object} [options] Options object
 * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
 * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
 * @param {Number} [options.multiplier=1] Multiplier to scale by
 * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
 * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
 * @param {Number} [options.width] Cropping width. Introduced in v1.2.14
 * @param {Number} [options.height] Cropping height. Introduced in v1.2.14
 * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
 * @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo}
 * @example <caption>Generate jpeg dataURL with lower quality</caption>
 * var dataURL = canvas.toDataURL({
 *   format: 'jpeg',
 *   quality: 0.8
 * });
 * @example <caption>Generate cropped png dataURL (clipping of canvas)</caption>
 * var dataURL = canvas.toDataURL({
 *   format: 'png',
 *   left: 100,
 *   top: 100,
 *   width: 200,
 *   height: 200
 * });
 * @example <caption>Generate double scaled png dataURL</caption>
 * var dataURL = canvas.toDataURL({
 *   format: 'png',
 *   multiplier: 2
 * });
 */
toDataURL: function (options) {
  options || (options = { });

  var format = options.format || 'png',
      quality = options.quality || 1,
      multiplier = options.multiplier || 1,
      cropping = {
        left: options.left || 0,
        top: options.top || 0,
        width: options.width || 0,
        height: options.height || 0,
      };
  return this.__toDataURLWithMultiplier(format, quality, cropping, multiplier);
}

Object instead string!

What is the current mechanism by which we set the currently active text object to edit? In the example we can double-click and make the object editable. How do we do this in practice?

I get that we "catch" the active object via objectActivated, but I see nowhere in the documentation anything regarding a text cursor or otherwise. I've also looked at the source of the sample projects, but I see nothing that stands out. Clearly I've overlooked something. 🤔

Hello,

Thank you for providing the image editor but now I want to use png image as icon instead of the SVG Path.

Hi,

When I add default Arrow icon , its size is quite huge. I've tried multiple methods to reduce its height and width , including the height/width of brush. But its not impacting. As fas as I could see it is plotted via a pathMap:

Arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',

I am not able to understand its structure in terms of height..Can you please manipulate it with a narrow icon ,I mean that may look like thinner arrow.

Thanks!
Anjali Bansal

when I add two objects on canvas I can not modified the previous object like I add two text or images then I can not rotate move first text or image

Hi there,

Great code here by the way. Just wanted to let you know that after cropping, I can't add a shape to the canvas.

Thanks

Hi guys,
is it possible to auto resize editor (canvas, controls,...) when user resize browser window?

Version

3.2.0

Development Environment

ReactJS, HTML5

Current Behavior

We would like to use your component in our app. But we would need it as a ReactJS Component. Are you interested in providing a basic component which basically wraps the whole thing?

// Write example code

Expected Behavior

Integrate the Image-Editor as a ReactJS Component in our mobile app.

Version

v3.02

Development Environment

Firefox, Windows 10

Current Behavior

_fabric2.default.util is undefined

// Write example code

Expected Behavior

I expected to include with NPM, copy the sample code, and it would work. However, I keep getting this fabric error. I've tried to include fabric with NPM and I've tried manually adding all the dependencies, but it doesn't work. Can you add an example project created with NPM. I have my doubts the NPM package works with the latest version.

Version

3.2.0

Current Behavior

1. Please check the text bar in api example. backspace doesnt seem to work. and a bit strange behaviour. it is working in 3.1.0 though.
2. Please Update Api refs to how to change brightness as well as how can i apply filters with more or less values.
   Thanks.

The addText init options styles.fill doesn't work.So I cant set the init color of the text.

Version

Development Environment

Current Behavior

A module with a potential security vulnerability is found on package-lock.json file.
This module is marked related to jsdoc package and this module's version should be updated.

Reference :

• https://nvd.nist.gov/vuln/detail/CVE-2017-17461
• https://nvd.nist.gov/vuln/detail/CVE-2017-1000427

Expected Behavior

Remove node_modules folder and package-lock.json file on local environment.
Install all packages and confirm to update version of marked on package-lock.json.

현재는 선(자유선, 직선)으로서 그 외 다양한 도형 추가에 대한 요청이 들어오고 있습니다.
기본적인 그외 도형(화살표 및 네모, 타원, 원 등 ) 에 대한 추가가 필요한 상황이며 unicode charset으로 처리하는 것이 이후에 좀 더 유연하게 기능 추가가 될 수 있을 듯 합니다.
http://unicode-table.com/en/sets/special-symbols/

Version

v3.2.0

Development Environment

Chrome v68

Current Behavior

I am running file example01-includeUi.html in examples folder
When I add a custom icon by clicking Custom icon button and choose an image to open then an error appear as follow and a black icon appear on canvas:

graphics.js:649 Uncaught TypeError: Cannot read property 'set' of undefined
at Graphics.setObjectProperties (graphics.js:649)
at ImageEditor.setObjectPropertiesQuietly (imageEditor.js:1366)
at iconCreateResize (action.js:134)
at ImageEditor.r.invoke (tui-code-snippet.min.js:7)
at ImageEditor.r.fire (tui-code-snippet.min.js:7)
at ImageEditor._onIconCreateResize (imageEditor.js:1013)
at Graphics.r.invoke (tui-code-snippet.min.js:7)
at Graphics.r.fire (tui-code-snippet.min.js:7)
at Icon.fire (component.js:36)
at klass.mouseMove (icon.js:82)

Expected Behavior

An normal icon should appear on canvas

Version

3.2.0

Development Environment

Current Behavior

// Write example code
```key: '_onFabricMouseUp',
	        value: function _onFabricMouseUp() {
	            var cropzone = this._cropzone;
	            var listeners = this._listeners;
	            var canvas = this.getCanvas();

	            canvas.setActiveObject(cropzone);
	            canvas.off({
	                'mouse:move': listeners.mousemove,
	                'mouse:up': listeners.mouseup
	            });

## Expected Behavior
<!-- Write a description of the future action. -->

의존성있는 모듈의 버전 정보입니다.

• jquery 2.1.4
• fabric 1.6.6
• fe-code-snippet 1.2.1
• tui-image-editor 1.2.0

1. 이미지를 처음 로딩하거나 로테이션 이후 imageEditor.toDataURL() 을 명시적으로 호출하지 않으면 하면에 표시되지 않습니다.

imageObjectURL = window.URL.createObjectURL(fileOrBlob);
            imageEditor = new tuiImageEditor('.image-editor canvas', {
                cssMaxWidth: 720, // Component default value: 1000
                cssMaxHeight: 600  // Component default value: 800
            });

            imageEditor.loadImageFromURL(imageObjectURL, fileOrBlob.name);
            imageEditor.on({
                loadImage: function (dimension) {
                    window.URL.revokeObjectURL(imageObjectURL);
                    imageEditor.toDataURL();    //to trick for display image rendering
                },
                emptyUndoStack: function () {
                    $scope.vm.emptyUndo = true;
                },
                emptyRedoStack: function () {
                    $scope.vm.emptyRedo = true;
                },
                pushUndoStack: function () {
                    $scope.vm.emptyUndo = false;
                },
                pushRedoStack: function () {
                    $scope.vm.emptyRedo = false;
                }
            });

function applyRotate(rotate) {
            imageEditor && imageEditor.rotate(rotate);
            imageEditor.toDataURL();    //to trick for display image rendering
        }

        function applyAngle(angle) {
            imageEditor && imageEditor.setAngle(angle);
            imageEditor.toDataURL();    //to trick for display image rendering
        }

1. 이미지 로딩 후 pushUndoStack callback이 무조건 1번 호출됩니다.
2. Undo / Redo 기능을 활성화/비활성화 하기 위해서 사용하는 콜백인데 무조건 Undo 기능이 활성화되며 Undo 를 호출 시 기존에 로드된 이미지가 제거됩니다. 다시 Redo 호출 시 스크립트 에러가 발생합니다.
   image-editor.js:840 Uncaught TypeError: Cannot read property 'getElement' of null(anonymous function) @ image-editor.js:840(anonymous function) @ fabric.min.js:2n.onerror @ fabric.min.js:1
3. emptyUndoStack, emptyRedoStack, pushUndoStack, pushRedoStack callback의 arguments 는 모두 [] 값으로 설정됩니다.
4. imageEditor.clearObjects() 호출 시 로드된 이미지 정보까지 초기화 됩니다.
5. imageEditor.loadImageFromFile() 을 사용할 경우 내부적으로 URL.createObjectURL()을 사용하는데 이후 URL.revokeImageObjectURL() 호출이 되지 않으면 메모리 릭이 날 가능성이 있습니다. 관련 예외처리가 필요합니다.

* 아래 URL에서 확인가능합니다.*
https://nhnent.dev.dooray.com/messenger?_digest=true
클립보드에 이미지를 하나 복사해서 메신저 본문에 붙이거나, 이미지 파일을 메신저 본문에 드래그 할 경우 해당 기능 확인이 가능합니다.

Version

3.2.0

Development Environment

MacOS 10.12.6
Chrome Version 68.0.3440.106 (Official Build) (64-bit)

Current Behavior

I realize this probably isn't a priority, but the editor doesn't display in VueJS app. Logging the results to the console shows no errors, and a successful result of the load, however nothing displays. The page literally has no relevant CSS that would hide the editor or otherwise manipulate it. I'm sure I'm missing something simple, but perhaps the JQuery requirements of ToastUI are causing problems? 🤔

<template lang="html">
  <div class="">
    <div id="image-editor" class="image-editor">
    </div>
  </div>
</template>

<script>
import ImageEditor from 'tui-image-editor'

export default {
  mounted(){
    this.EditorInstance = new ImageEditor(document.querySelector('#image-editor'), {
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        selectionStyle: {
            cornerSize: 20,
            rotatingPointOffset: 70
        }
    });

    this.EditorInstance.loadImageFromURL(this.imageStoragePath,'image-editor')
      .then(resp=>{
        console.log('RESP',resp)
      })
      .catch(err=>{
        console.log('ERROR',err)
      })
  },
  data(){
    return{
      EditorInstance:null
    }
  },
  methods:{

  },
  computed:{
    imageStoragePath(){
      return '/storage/' + this.photo.path
    }
  },
  props:['photo']
}
</script>

<style lang="css">
</style>

Expected Behavior

It would be nice if I could actually load/view the editor.

Version

Any

Development Environment

Any

Current Behavior

I'm trying to change corner details in your js file.
However all the other changes are working except cornerSize .
How can i fix it?

I found that you are using very older version of fabric.
Will upgrading fabric will work in this situation.?

And as a feature request, can you add a method to change corner properties in next update?

Looking forward for response.

tui-image-editor.js line: 3865

fObjectOptions: {
	        SELECTION_STYLE: {
	            borderColor: 'red',
	            cornerColor: 'green',
	            cornerSize: 10,
	            originX: 'center',
	            originY: 'center',
	            transparentCorners: false
	        }
	    },

Version

3.2.0

Development Environment

Angular JS and Angular projects

Current Behavior

As I checked at the moment this issue is created, ToastUI image-editor has not an angularJS or angular version.

Expected Behavior

It's good to have an angularJS and angular module which can easily integrate with angular projects. Like this Image Editor, "unfortunately it's not Free".

imageEditor.changeTextStyle({
    fontSize: 10,
    fill: '#f00',
    fontWeight: 'bold'
})

형태로 사용시 특정 하나의 property만 반영되고 나머지는 무시되는 것 같습니다.

Version

3.2.0

Development Environment

Chrome, Mac 10.13.4

Current Behavior

When importing with Webpack, the SVG icons are not loading because they are pointing to the current page whereas the icons are located inside the node_modules package (screenshot: https://s.zeshanahmed.com/a_2109F674.png).

And I am unable to set the path for the SVG icons either. Checked the documentation, read the code, but can't find any hint.

Here's my code:

var ImageEditor = require( 'tui-image-editor' );
// var blackTheme = require( './js/theme/black-theme.js' );

jQuery(document).ready(function($) {
  const $images = $('.images'),
        $image  = $('.image');

  $image.each((index, el) => {
    console.log( index, $(el) );

    const $el     = $( el );
    const $elImg  = $el.find( 'img' );
    const $edit   = $el.find( '.image__action--edit' );
    const $delete = $el.find( '.image__action--delete' );
    const $upload = $el.find( '.image__upload' );

    $edit.on('click', e => {
      e.preventDefault();

      var instance = new ImageEditor( document.querySelector( '#image-editor-container' ), {
        includeUI: {
          loadImage: {
            path: $el.data( 'image' ),
            name: 'SampleImage'
          },
          // theme: blackTheme, // or whiteTheme
          initMenu: 'filter',
          menuBarPosition: 'bottom'
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        }
      });
    });
  });
});

Expected Behavior

I need to find how I can pass a custom path for the SVG icons URLs.

예전에 가이드 주신 내용으로는 처음에 이미지를 로딩 후 image-editor wrapper 에 height값을 설정하게 되어 있는데요.
문제는 crop이나 화면 로테이션 시 실제 이미지 크기가 변경됨에도 불구하고 원래 크기의 영역이 공허하게 뜨는 문제가 발생되고 있습니다.

켄버스에 렌더링된 크기를 정확히 반영할 수 있는 방법이 필요합니다.

Shape tool is no longer available after removing the last shape.

1. click shape
2. create square
3. select square
4. click remove selected object
5. no longer can you create a shape

This also happens if I select the shape object and select delete on the keyboard. ( I suspect they both take the same code path - to removeActiveObject() )
I'm not sure where to look to debug this?

Version

3.1.0

Development Environment

latest Google Chrome

Current Behavior

I get canvasImage.setAngle is not a function when using Fabric 2.3.3.

Fabric 1.6.7 works fine.

Expected Behavior

It should probably work with Fabric 2.3.3 or theDependency section should mention that Fabric 2.3.3 is not supported.

Hi,

Can you please help me to do the highlight or blur the selected area of image in canvas to highlight and blur..I need these two features as well.

Thanks

Version

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
--
  | <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.code-snippet/v1.2.5/dist/tui-code-snippet.js"></script>
  | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
  | <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.component.colorpicker/1.0.2/dist/colorpicker.min.js"></script>
  | <script type="text/javascript" src="http://nhnent.github.io/tui.image-editor/latest/dist/tui-image-editor.js"></script>

Development Environment

Windows 7, browser : Google Chrome

Current Behavior

// Write example code

imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(sizeValue => {
    console.log(sizeValue);
	imageEditor.addText('hello 1', {
        position: {
					x: 100,
					y: 100
				}
    });
    imageEditor.deactivateAll();

	imageEditor.addText('hello 2', {
        position: {
					x: 300,
					y: 300
				}
    });

    imageEditor.clearUndoStack();
});

Expected Behavior

I want add multiple text but error here

tui-image-editor.js:1795 Uncaught (in promise) The executing command state is locked.
execute @ tui-image-editor.js:1795
execute @ tui-image-editor.js:571
addText @ tui-image-editor.js:1062
imageEditor.loadImageFromURL.then.sizeValue @ service-basic.js:1063
Promise resolved (async)
(anonymous) @ service-basic.js:1053

Please help me. Thank you so much