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代码应该是什么样子来获得＆＃39; toDataURL＆＃39;裁剪图像的字符串？我目前的剧本和我测试过的很多变化都没有成功： - （

<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

如何使用由fengyuanchen的Cropper使用javascript检索toDataURL字符串

1 个答案: