0

编辑：我制作了一个视频来展示当前的问题。用旧的macbook录的，所以花了点时间哈哈。无论如何，在视频中你可以看到我上传图像，裁剪它并用它生成一个 pdf。预览没有黑色边框，pdf 有黑色边框。希望这有帮助。

所以我得到了一个 web 应用程序，它可以让用户上传个人资料图片，然后生成带有个人资料图片的 pdf。问题是我想用圆角/圆形显示个人资料图片。

我jspdf用来生成pdf。使用该库，我可以使用该方法添加图像，该addImage方法采用 base64 编码的 DataUrl。不幸的是，没有一种原生方法来显示带有圆角/圆形的图像，所以我决定让用户在将 url 编码为 base64 之前裁剪他们的图像。那是奇怪的行为开始的时候......如果裁剪的图像显示在img标签中，那一切都很好，显示了一个漂亮的圆形个人资料图片。当该 dataUrl 用于生成 pdf 时，由于某种原因，图像周围会生成 1px 黑色边框...如果我在浏览器中检查 dataurl 或使用在线 base64 预览器，则只有当它获取时，才会看到黑色边框生成为pdf...

出于演示目的，我制作了一个代码框。白色背景的图像最能说明问题。例如，使用这个图像：profilepicture

这种方法很可能是导致问题的原因（我直接从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;
    }

这种方法用在这样的crop方法中：roundedCanvas = getRoundedCanvas(croppedCanvas);如果我拿出那个方法并只使用roundedCanvas = croppedCanvas;图像，就会被裁剪成一个正方形，并且显示时没有黑色边框。

我不知道如何解决这个问题，甚至是否有可能解决。非常感谢任何在正确方向上的帮助。甚至欢迎在 pdf 上显示圆形/圆形图像的替代方法（我已经尝试过html2canvas但没有用）。

4

0 回答 0