Есть ли способ изменить изображение с помощью Javascript? - PullRequest
Новая
       32

Есть ли способ изменить изображение с помощью Javascript?

0 голосов
/ 06 ноября 2019

Итак, я получил проект, в котором пользователь может сгенерировать PDF на основе своего ввода. Использование библиотеки jspdf для генерации файлов PDF. Дело в том, что пользователь может загрузить изображение профиля, и я хотел бы отображать это изображение с закругленными углами или полностью закругленными (с border-radius 50%). Поскольку, насколько мне известно, нет встроенной функции, позволяющей это сделать в jspdf или любой другой библиотеке (pfdkit, pdfmake), я ищу способ изменить изображение перед генерацией pdf,

Я уже пытался использовать html2canvas, и это на самом деле работало нормально. Проблема с html2canvas возникает, когда пользователь находится на своем мобильном телефоне. Поскольку width и height изображения настроены на размер экрана (оба из которых составляют 35px), сделайте снимок с html2canvas и затем отобразите его в формате PDF с шириной и высотой 100 пикселейизображение явно становится размытым.

Так что в идеале мне нужно что-то отредактировать исходное изображение или что-то еще перед генерацией PDF-файла с jspdf.

Любые другие идеи, которые приближают меня к решению, также очень ценятся.

Просто для пояснения, простое добавление свойства CSS к изображению не поможет. jspdf просто использует изображение в теге img, без каких-либо свойств CSS.

Ответы [ 3 ]

1 голос
/ 06 ноября 2019

Я бы посоветовал вам добавить класс к изображению до того, как вы сгенерируете pdf, и определите правило для этого класса в css: 

.circle {
  border-radius: 50%;
}

Или даже вам может потребоваться форсировать, если уже естьCSS с некоторым значением радиуса границы для тега img: 

.circle {
  border-radius: 50% !important;
}
0 голосов
/ 11 ноября 2019

Если кто-то по какой-то причине наткнулся на этот пост, мне действительно удалось достичь желаемого результата. Как я уже сказал, пользователь может загрузить изображение, и я хотел бы отобразить это изображение со скругленными углами или с радиусом границы 50%. В любом случае, перед предварительным просмотром (и загрузкой) изображения на мой веб-сайт пользователь должен обрезать изображение, используя cropperjs. Затем они могут сами решить, будут ли они отображать изображение со скругленными углами или с радиусом границы 50%. Я думаю, что это дает огромный импульс UX и моему конечному результату.

0 голосов
/ 06 ноября 2019

Можно использовать округленные изображения в jspdf, вам просто нужно применить округлость к изображению перед добавлением его в PDF, если у вас уже есть изменение размера, у вас есть контекст.

roundedImageвзято из: Canvas drawimage с закругленными углами

Например (не будет работать на SO, поэтому нет демонстрации): 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8" />

    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: #ccc;
      }
      #pdf {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <embed id="pdf" src="#" type="application/pdf" width="100%" height="100%" />
    <script>
      function roundedImage(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(
          x + width,
          y + height,
          x + width - radius,
          y + height
        );
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
      }

      var img = new Image();
      img.src = "https://graph.facebook.com/649650002/picture?type=square";
      img.setAttribute("crossorigin", "anonymous");

      img.onload = function() {
        //
        const canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext("2d");

        roundedImage(ctx, 0, 0, 50, 50, 5);
        ctx.clip();
        ctx.drawImage(img, 0, 0, img.width, img.height);
        ctx.restore();

        // Default export is a4 paper, portrait, using milimeters for units
        var doc = new jsPDF();

        doc.text("woop!..rounded corners.", 10, 15);
        doc.addImage(canvas.toDataURL("image/png"), "PNG", 15, 25, 30, 30);

        document.getElementById("pdf").src = doc.output(
          "dataurlstring",
          "its-a.pdf"
        );
      };
    </script>
  </body>
</html>
...