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

Question

我正在使用 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>

Answer 1

你有这个：

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

改成：

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

如果文档正确（https://github.com/fengyuanchen/cropper/blob/v2.2.5/README.md#getcroppedcanvasoptions），则返回的值是 a HTMLCanvasElement，因此它可以完美地工作：

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

更多信息：

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