Question

我正在使用名为cropit的酷工具。这就是我已经拥有的：

http://code.reloado.com/ejiyov3

现在，点击＆＃34;导出＆＃34;按钮，我想更改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>

从预览窗口中获取图像或画布

1 个答案: