Изменение ширины и высоты изображения с помощью html2canvas - PullRequest
Новая
       37

Изменение ширины и высоты изображения с помощью html2canvas

0 голосов
/ 11 января 2019

Я использую html2canvas.js, чтобы получить изображение с веб-страницы, которое сохраняет его в каталог в веб-корне, чтобы это изображение можно было загрузить и опубликовать в Facebook. Проблема, которую я получаю, заключается в том, что изображение не изменяется в размере, и после загрузки в Facebook оно сохраняет исходные размеры, поэтому обрезает часть изображения. Есть ли где я могу заставить / изменить ширину и высоту в процессе? (т.е. до того, как html2Canvas сохранит изображение?) 

 html2canvas(
        document.getElementById('strengths-display'),
        {
            canvas: canvas
        }
    ).then(function (canvas) {
        let data = canvas.toDataURL();
        $.post('{% url 'save_strengths_image' %}', {
            binary_data: data,
            csrfmiddlewaretoken: getCookie('csrftoken')
        }).done(function () {
            $('#fbshare').on('click', function (ev) {
                ev.preventDefault();
                FB.ui({
                    method: "feed",
                    link: "{% fullurl 'facebook_share_strengths' request.user.pk %}",
                    picture: "{{ scheme }}://{{ uri }}{% get_media_prefix %}{{ user.strengths_image }}",
                    name: "{% trans 'What Job Fits Me' %}",
                    caption: '{{ site }}',
                    description: "{% trans 'Get the best from your potential!' %}",
                    display: 'popup'
                }, function (t) {
                    let str = JSON.stringify(t);
                    let obj = JSON.parse(str);
                    if (obj.post_id != '') {
                        set_shared();
                    }
                });
            });
            $('#fbshare').show();
        });

<script src="{% static 'js_static/html2canvas.js' %}"></script>
<script>
 let canvas = document.getElementById('image_canvas');

    html2canvas(
        document.getElementById('strengths-display'),
        {
            canvas: canvas
        }
    ).then(function (canvas) {
        let data = canvas.toDataURL();
        $.post('{% url 'save_strengths_image' %}', {
            binary_data: data,
            csrfmiddlewaretoken: getCookie('csrftoken')
        }).done(function () {
            $('#fbshare').on('click', function (ev) {
                ev.preventDefault();
                FB.ui({
                    method: "feed",
                    link: "{% fullurl 'facebook_share_strengths' request.user.pk %}",
                    picture: "{{ scheme }}://{{ uri }}{% get_media_prefix %}{{ user.strengths_image }}",
                    name: "{% trans 'What Job Fits Me' %}",
                    caption: '{{ site }}',
                    description: "{% trans 'Get the best from your potential!' %}",
                    display: 'popup'
                }, function (t) {
                    let str = JSON.stringify(t);
                    let obj = JSON.parse(str);
                    if (obj.post_id != '') {
                        set_shared();
                    }
                });
            });
            $('#fbshare').show();
        });
  
 <div id="canvas-container-hidden">
    <canvas id="image_canvas"></canvas>
</div>

введите описание изображения здесь

1 Ответ

0 голосов
/ 11 января 2019

с помощью drawImage () вы можете установить высоту и ширину для вашего холста, для более подробной информации, пожалуйста, перейдите по ссылке ниже: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

...