jQuery和Canvas：我想使用jquery和canvas在html上显示裁剪图像

Question

<div>
  <img id="image" src="../docs/images/picture-3.jpg" alt="Picture" width="200" height="200">
</div>
<button type="button" id="button">Crop</button>
<div id="result"></div>

这是HTML文件。

$(function () {
    ...

   $button.on('click', function () {
   alert('button1');
   var croppedCanvas;
   var roundedCanvas;

   if (!croppable) {
        return;
   }
   alert('button2');
   // Crop

   croppedCanvas = $image.cropper('getCroppedCanvas');

   // Round
   roundedCanvas = getRoundedCanvas(croppedCanvas);


   **var dataurl = croppedCanvas.toDataURL();**

   console.log('roundedCanvas');
   console.log('dataurl');
   console.log(dataurl);
   // Show
   **$result.html('<img src="' + roundedCanvas.toDataURL() + '">');**
    });
 });

我想在html的div结果上显示裁剪图像。但* .toDataUrl函数无法正常工作。有人想过吗？