0

I am using html2canvas.js to grab an image from a webpage which the saves it to a directory in the webroot so this the image can uploaded and shared to Facebook. The problem I getting is that the image does not seem to resize and once it is uploaded to Facebook it retains the original dimensions therefore cutting off part of the image. Is there any where I can force/change the width and height in the process? (i.e. before the html2Canvas saves the image ?)

 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>

enter image description here

Mauzer1970
  • 11
  • 3

1 Answers1

-1

using drawImage() you can set height and width for your canvas , for more please refer below link: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

MKJ
  • 120
  • 8