Question

我正在尝试使用内联CSS导出圆形图像，但是当导出到Word文档时，我得到一个巨大的矩形图像。为什么？我该如何解决这个问题？有没有其他方法可以简单地导出它（到.docx或PDF或其他东西）？

我正在使用由markswindoll开发的jQuery-word-export插件。

我正在尝试的是：Profile picture example
我得到的是：Exported example

我的代码是：

<div  id="export-content">
    <!-- PROFILE PICTURE -->
    <div id="divProfielfoto" ng-controller="profielfotoCtrl">
        <img id="profielfoto" ng-src="{{profielfoto}}" alt="profielfoto" style="width: 125px;height:125px;margin-bottom: 20px; border-radius:50%; border: 7px solid orange;" />
    </div>
    <input style="display: none;" id="profileUpload" type="file" accept="image/*"/>
    <!-- PROFILE PICTURE END -->
</div>
<button class="word-export" onclick="export()">Export as .doc</button>

我的导出代码如下：

$(".word-export").click(function (event) {
        $("#export-content").wordExport("CV " + naam);
    });

如果它们易于使用（我是网络应用程序开发的初学者），也欢迎任何其他插件/解决方案

Answer 1

插件从HTML中的所有图像中绘制画布。你需要做的就是替换它：

// Embed all images using Data URLs
        var images = Array();
        var img = markup.find('img');
        for (var i = 0; i < img.length; i++) {
            // Calculate dimensions of output image
            var w = Math.min(img[i].width, options.maxWidth);
            var h = img[i].height * (w / img[i].width);
            // Create canvas for converting image to data URL
            var canvas = document.createElement("CANVAS");
            canvas.width = w;
            canvas.height = h;
            // Draw image to canvas
            var context = canvas.getContext('2d');
            context.drawImage(img[i], 0, 0, w, h);
            // Get data URL encoding of image
            var uri = canvas.toDataURL("image/png");
            $(img[i]).attr("src", img[i].src);
            img[i].width = w;
            img[i].height = h;
            // Save encoded image to array
            images[i] = {
                type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
                encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
                location: $(img[i]).attr("src"),
                data: uri.substring(uri.indexOf(",") + 1)
            };
        }

用这个：

            // Draw image to canvas
            var context = canvas.getContext('2d');
            context.save();
            context.beginPath();
            context.arc(canvas.width / 2, canvas.height / 2, 62.5, 0, 2 * Math.PI, false);
            context.lineWidth = 10;
            context.clip();
            context.drawImage(img[i], 0, 0, w, h);

它会创建一个圆形图像。问题解决了！

CSS边框半径在jQuery-word-export插件中不起作用

1 个答案: