javascript - 裁剪后的图片显示有1px黑色边框(Cropped image displayed with a weird 1px black border)

Question

EDIT: I've made a video showing the current issue.

(编辑：我做了一个视频，显示当前问题。)

Recorded it on an old macbook so it took a while haha.

(记录在一台旧的Macbook上，花了一段时间哈哈。)

Anyway, In the video you can see me uploading an image, cropping it and generating a pdf with it.

(无论如何，在视频中，您可以看到我上传图像，裁剪图像并生成pdf。)

The preview does not have a black border whatsoever, the pdf DOES have a black border.

(预览没有黑色边框，而pdf确实有黑色边框。)

Hope this helped.

(希望这会有所帮助。)

So I got a webapplication that lets the user upload a profile picture and later generate a pdf with the profile picture.

(因此，我得到了一个Web应用程序，该应用程序允许用户上传个人资料图片，然后使用该个人资料图片生成pdf。)

The problem is that I would like to have the profile picture displayed with rounded corners / in a circle.

(问题是我想将个人资料图片显示为圆角/圆。)

I am using jspdf to generate the pdf.

(我正在使用jspdf生成pdf。)

With that library I can add an image with the addImage method, that takes a base64 encoded DataUrl.

(使用该库，我可以使用addImage方法添加图像，该图像采用base64编码的DataUrl。)

Unfortunately, there isn't a native method to display the image with rounded corners / in a circle, so I decided to let the user crop their image before encoding the url to base64.

(不幸的是，没有一种原生方法可以显示带有圆角/圆的图像，因此我决定让用户在将URL编码为base64之前裁剪其图像。)

That's when the weird behavior starts... If the cropped image is displayed in a img tag, it's all good, a nice circle profile picture is displayed.

(那是奇怪的行为开始的时候...如果裁剪后的图像显示在img标签中，那一切都很好，将显示一个漂亮的圆形轮廓图片。)

When that dataUrl is used to generate a pdf, for some reason a 1px black border is generated around the image... If I inspect the dataurl in the browser or with a online base64 previewer, no black border is visible, only when it gets generated as a pdf...

(当使用该dataUrl生成pdf时，由于某种原因，在图像周围会生成1px黑色边框...如果我在浏览器中或使用在线base64预览器检查dataurl，则只有当黑色边框出现时，才会显示黑色边框以pdf格式生成...)

For demonstration purposes I made a codesandbox .

(为了演示，我制作了一个codeandbox 。)

Images with a white background show the problem best.

(带有白色背景的图像最能说明问题。)

For example, use this image: profilepicture

(例如，使用此图像： profilepicture)

This method is most likely what is causing the problem (I took this one directly from the cropperjs examples on github):

(这种方法很可能是导致问题的原因（我直接从github上的cropperjs示例中获取了此方法）：)

function getRoundedCanvas(sourceCanvas) {
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;
        canvas.width = width;
        canvas.height = height;
        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height);
        context.globalCompositeOperation = "destination-in";
        context.beginPath();
        context.arc(
            width / 2,
            height / 2,
            Math.min(width, height) / 2,
            0,
            2 * Math.PI,
            true
        );
        context.fill();
        return canvas;
    }

This method is used in the crop method like this: roundedCanvas = getRoundedCanvas(croppedCanvas);

(这种方法在诸如此类的crop方法中使用： roundedCanvas = getRoundedCanvas(croppedCanvas);)

If I take out that method and just use roundedCanvas = croppedCanvas;

(如果我删除该方法，仅使用roundedCanvas = croppedCanvas;)

the image gets cropped to a square and is displayed without the black borders.

(图像被裁剪为正方形，并且显示时没有黑色边框。)

I have no idea how I can resolve this issue, and if it is even possible to resolve.

(我不知道该如何解决这个问题，甚至是否有可能解决。)

Any help in the right direction is very much appreciated.

(非常感谢在正确方向上的任何帮助。)

Even alternative methods to display rounded / circle images on a pdf are welcome (I already tried html2canvas and that didn't work).

(甚至还可以使用其他方法在pdf上显示圆角/圆形图像（我已经尝试过html2canvas ，但没有用）。)

  ask by Reinier68 translate from so

Answer 1

等待大神答复