Question

我正在使用html2canvas.js从网页中抓取图片，并将其保存到webroot中的目录中，以便可以将该图片上传并共享到Facebook。我得到的问题是图像似乎没有调整大小，并且一旦将其上载到Facebook，它将保留原始尺寸，因此会切断图像的一部分。在此过程中，有什么地方可以强制/更改宽度和高度？（即html2Canvas保存图片之前？）

export default class CharacterForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                { name: "itemone" image: "defaultone.png"},
                { name: "itemtwo" image: "defaulttwo.png"},
                { name: "itemthree" image: "defaultthree.png"},
            ]
        };
    }

    render() {
        return (
        <div className="items-column">
          {this.state.items.map(item => (<FrameCharacter key={item.name} item={item} />))}
            </div>
        );
    }
}

 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();
        });

enter image description here

Answer 1

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

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

1 个答案: