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

我使用的是fengyuanchen的精彩Cropper(来自github),但只停留在一个小细节上.任何使用过此组件的人都可以向我显示一两行简单的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>

解决方法:

你有这个：

 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

标签：html5-canvas,javascript,jquery
来源： https://codeday.me/bug/20191119/2033317.html