jQuery-word-exportプラグインでCSS境界線が機能しない

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); 
    }); 

他のプラグイン/ソリューションも使いやすい（私はWebアプリケーション開発の初心者です）

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); 

そして、それは円形画像を作成するあなたがしなければならない事は、これを置き換えるです。問題が解決しました！