javascript 如何从cropper js获取裁剪图像?

tpxzln5u  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(125)

我试图从cropperjs得到裁剪的图像结果,但我不知道如何得到它。我试着在网上搜索,但找不到解决方案。
我的代码如下所示。

$(function () 
  {

  $image=null;

  var img = document.createElement("IMG");
  img.src = "";
  img.setAttribute('id', "showImage");
  document.getElementById("img-container").appendChild(img);

  var url = canvas.toDataURL();
  canvasImage.src = url;
  console.log(canvasImage);

  document.getElementById("showImage").src=canvasImage.src;
  $image = $('#showImage');
  $image.cropper({
    movable: true,
    zoomable: false,
    rotatable: false,
    scalable: false
  });

  $('#replace').on('click', function () {   
    var croppedimage = new Image();
    var cropBoxData = $image.cropper('getCropBoxData');
    croppedimage=$image.data('cropper');
    // croppedimage= this.cropper.
    console.log($image);
  });
});
rdrgkggo

rdrgkggo1#

$('#replace').on('click', function () {   
    var croppedimage = $image.getCroppedCanvas().toDataURL("image/png");
    console.log(croppedimage);
});

你可以得到base64

kse8i1jr

kse8i1jr2#

如果你使用的是React,你应该等待裁剪器是ready,然后从ready事件中获取裁剪器示例(带imageData)。
你可以得到这样的事件:

const handleReady = useCallback((readyEvent: Cropper.ReadyEvent<HTMLImageElement>) => {
    const cropperInstance = readyEvent.currentTarget?.cropper;
    const imageData = readyEvent.currentTarget?.cropper.getImageData();
  }, []);

return (
  <Cropper
    ...
    ready={handleReady}
  />
);

相关问题