Image not apprearing in cropping area

[pbr0ck3r]

var img = $("#crop-image img")[0].src;
    new Darkroom(".target img", {
      image: img,
      // Plugins options
      plugins: {
        crop: {
        },
        save: false
      },
      initialize: function() {
        var cropPlugin = this.plugins['crop'];
        // cropPlugin.selectZone(170, 25, 300, 300);
        cropPlugin.requireFocus();
      }
    });

The above creates a darkroom object and shows toolbar, but canvas is white and image does not show.

[MattKetmo]

Hello. I don't know what your #crop-image img element is, but the image: img is not a valid option in Darkroom constructor.

[pbr0ck3r]

var img is a source image that i have stored on the page (a AWS url). so when i try to set the new darkroom on the .target img. the canvas is white and i can not see the image ( but it is still on the page, just set to display: none. here is a snippet of my html to go with the above code.

before

<div id="crop-image" class="target">
   <img src="https://s3.amazonaws.com/sigstr/campaigns/56bb9dc3808da612b6000003/desktop_ScreenShot20160314at3.20.52PM.png">
</div>

after

<div id="crop-image" class="target">
  <div class="darkroom-container">
    <div class="darkroom-toolbar">
    </div>
    <div class="darkroom-image-container">
      <div class="canvas-container" style="width: 600px; height: 275px; position: relative; -webkit-user-select: none;">
        <canvas class="lower-canvas" width="1200" height="550" style="position: absolute; width: 600px; height: 275px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
        <canvas class="upper-canvas " width="600" height="275" style="position: absolute; width: 600px; height: 275px; left: 0px; top: 0px; -webkit-user-select: none; cursor: crosshair;"></canvas>
      </div>
    </div>
    <div class="darkroom-source-container" style="display: none;">
      <div class="canvas-container" style="width: 600px; height: 275px; position: relative; -webkit-user-select: none;">
        <canvas class="lower-canvas" width="1200" height="550" style="position: absolute; width: 600px; height: 275px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
        <canvas class="upper-canvas " width="600" height="275" style="position: absolute; width: 600px; height: 275px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
      </div>
    </div>
    <img
      src="https://s3.amazonaws.com/sigstr/campaigns/56bb9dc3808da612b6000003/desktop_ScreenShot20160314at3.20.52PM.png"
      crossorigin="anonymous"
      alt="crop image preview"
      border="0"
      style="color: blue; font-family: Helvetica; font-size: 12px; display: none;"
      class="canvas-img">
  </div>
</div>

I also removed image from the constructor, still doesn't seem to show my original image.

[swizzmagik]

I am experiencing a similar issue. The plugin works fine in chrome on Windows, but behaves as @pbrocker describes in chrome on Mac... very strange...

[pbr0ck3r]

I also am using a mac, have tried both firefox and chrome.

[GuilhermeGiacomoSimoes]

Unfortunately what you are trying to do is not feasible. Since from what I understand, you are trying to edit an image that is on Amazon ... You will not be able to, DarkroomJS only edits images that are in the project directories. Then in Amazon's own documentation you find how to download files and store them in a specific directory and then you can edit the image. Link Amazon here: https://docs.aws.amazon.com/AmazonS3/latest/dev/GettingObjectsUsingAPIs.html

in this link you have to select your programming language and it will give you examples of how to proceed with it.

Hope this helps :)