使用 html2canvas 调整图像的宽度和高度答案

【问题标题】：Resizing the width and height of an image using html2canvas使用 html2canvas 调整图像的宽度和高度
【发布时间】：2019-06-06 16:07:57
【问题描述】：

我正在使用 html2canvas.js 从网页中抓取图像，然后将其保存到 webroot 中的目录，以便可以将图像上传并共享到 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>

enter image description here

【问题讨论】：

标签： javascript image image-resizing html2canvas

【解决方案1】：

使用 drawImage() 你可以为你的画布设置高度和宽度，更多请参考下面的链接： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

【讨论】：