CSS Радиус границы не работает в jQuery-word-export plugin

Я пытаюсь экспортировать круговое изображение с использованием встроенного CSS, но при экспорте в документ Word я получаю огромное прямоугольное изображение. Зачем? И как я могу это решить? Есть ли другой способ экспортировать его просто (в .docx или PDF или что-то еще)?CSS Радиус границы не работает в jQuery-word-export plugin

Я использую плагин jQuery-word-export, разработанный markswindoll.

То, что я пытаюсь это: 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); 
    });

Любые другие плагины/решения также приветствуются, если они просты в использовании (я новичок в разработке веб-приложений)

источник

2016-11-14 Johnnybossboy

Я бы предположил, что в библиотеке экспорта нет кода для поддержки круговых границ в Word? Вероятно, вы не можете этого сделать, к сожалению, за исключением переписывания библиотеки или добавления ее в качестве запроса разработчику. – junkfoodjunkie

Если это не поможет, попробуйте ли вы использовать эту границу по фоновому изображению для вашего #divProfielfoto div? – nguyenhoai890

nguyenhoai890 Я пробовал, но это не сработает. Ну, в экспортированном файле он работает с границей (он показывает), но не как круг – Johnnybossboy

Плагин рисует холст со всех изображений в 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);

И это создает круговое изображение. Задача решена!

источник

2016-11-29 10:46:27 Johnnybossboy

CSS Радиус границы не работает в jQuery-word-export plugin

ответ

Смежные вопросы