Resizing the width and height of an image using html2canvas

Question

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? (ie 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

Answer 1

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