从预览 window 中获取图像或 canvas

Question

我正在使用一个很酷的工具 cropit。这是我已经拥有的：

http://code.reloado.com/ejiyov3

现在，通过单击 "Export" 按钮，我想更改 window.open(imageData) 操作并将预览图像作为所有这些图像下方的单独站立图像。换句话说 - 我想拍一张快照，每次我更改预览并单击按钮时，快照也会更改。

知道如何对此采取行动吗？

Answer 1

您可以创建一个 <img> 元素，将 img 元素 src 设置为 imageData，将新创建的图像附加到文档

<!DOCTYPE html>
<html>

<head>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.cropit/0.5.1/jquery.cropit.js">
  </script>
  <meta charset=utf-8 />
  <title>code.reloado.com</title>
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <style>
    article,
    aside,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      display: block;
    }
    .cropit-preview {
      width: 360px;
      height: 360px;
    }
  </style>
</head>

<body>

  <!-- This wraps the whole cropper -->

  <div id="image-cropper">

    <!-- This is where the preview image is displayed -->
    <div class="cropit-preview"></div>

    <!-- This range input controls zoom -->
    <input type="range" class="cropit-image-zoom-input" />

    <!-- This is where user selects new image -->
    <input type="file" class="cropit-image-input" />


    <button class="export">Export</button>

    <script>
      $("#image-cropper").cropit();
      $('.export').click(function() {
        var imageData = $('#image-cropper').cropit('export');
        console.log(imageData);
        $("<img>", {
          src: imageData
        }).appendTo("body")
      });
    </script>

  </div>
</body>

</html>

从预览 window 中获取图像或 canvas

Getting an image or canvas out of the preview window

javascript

jquery

image

crop

getelementbyid