javascript - 如何使用 Cropper 通过 javascript 检索 toDataURL 字符串 by fengyuanchen

Question

我正在使用 fengyuanchen(来自 github)的出色 Cropper，我被困在一个小细节上。任何使用过此组件的人都可以向我展示一两行简单的 javascript/jquery，这将使我能够将裁剪图像中的 toDataURL 字符串放入文本框中吗？我已经尝试了其他线程中的所有示例，但我仍然无法获取字符串

这是我的页面 html:

    <div class="img-container">
      <img id="image" src="../Crop/test.jpg" alt="Picture" runat="server" />
    </div>

  <div class="col-md-3">
    <!-- <h3 class="page-header">Preview:</h3> -->
    <div class="docs-preview clearfix">
      <div class="img-preview preview-lg"></div>
      <div class="img-preview preview-md"></div>
      <div class="img-preview preview-sm"></div>
      <div class="img-preview preview-xs"></div>
    </div>

任何人都可以告诉我我的 JQuery 或 javascript 代码应该是什么样子来获取裁剪图像的“toDataURL”字符串？我当前的脚本和我测试过的许多变体都不起作用:-(

<script>
    function run() {
        var service = new CardsWCFAjax.UploadService();
        var $selector = $(".image");
        var canvas = $($selector).cropper('getCroppedCanvas');
        var image = canvas.toDataURL('image/png');
        image = canvas.replace('data:image/png;base64,', '');
        service.GetData(image, onSuccess, null, null);
    }
</script>

Answer 1

你有这个:

 var canvas = $($selector).cropper('getCroppedCanvas');

更改为:

 var canvas = $selector.cropper('getCroppedCanvas');

如果文档是正确的 (https://github.com/fengyuanchen/cropper/blob/v2.2.5/README.md#getcroppedcanvasoptions)，则返回值是一个 HTMLCanvasElement，因此它可以完美地用于:

 var canvas = $selector.cropper('getCroppedCanvas');
 var dataURL = canvas.toDataURL();

更多信息:

https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/toDataURL