Преобразовать HTML IMG элемент холста

Question

У меня есть html страницу с содержимым как

<div class="span12"> 
    <img id="myImg" src="myImage.png" style="max-width: 100%; height: auto;" /> 
</div> 

где фактический размер myImage.png является 1600 * 900. Изображение отображается с размером 796 * 448 (с сохранением пропорции).

Я пытаюсь преобразовать img элемент (с размером 796 * 448) до canvas элемента с помощью javascript в

function convertImgToCanvas(){ 
    var myImgElement = document.getElementById("myImg"); 
    var myCanvasElement = document.createElement("canvas"); 
    myCanvasElement.width = myImgElement.width; 
    myCanvasElement.height = myImgElement.height; 
    var context = myCanvasElement.getContext('2d'); 
    context.drawImage(myImgElement,0,0);  
} 

В результате полотно имеет размер 1600 * 900, не 796 * 448. Я ожидаю, что размер холста будет 796 * 448.

Если установить ширину и высоту холста как

myCanvasElement.width = '796px'; 
myCanvasElement.height = '448px'; 

размер холста становится 796 * 448, но изображение обрезается

Есть ли решение создать canvas от img элемент а, с точно такой же ширины и высоты, что и элемент img, без обрезки изображения?

Answer 1

Вы не используете drawImage правильно. Смотрите здесь: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Третий пример позволяет определить х, у, ширину и параметр высоты источника и назначения: ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Так проще всего исправить в вашем случае будет что-то вроде:

context.drawImage(myImgElement, 0, 0, 1600, 900, 0, 0, 796, 448); 

И вот оно в действии (идти на полную страницу из-за размера):

function convertImgToCanvas(){ 
 
    var myImgElement = document.getElementById("myImg"); 
 
    var myCanvasElement = document.createElement("canvas"); 
 
    // don't forget to add it to the DOM!! 
 
    document.body.appendChild(myCanvasElement); 
 
    myCanvasElement.width = 796; 
 
    myCanvasElement.height = 448; 
 
    var context = myCanvasElement.getContext('2d'); 
 
    context.drawImage(myImgElement, 0, 0, 1600, 900, 0, 0, 796, 448); 
 
    // remove the image for the snippet 
 
    myImgElement.style.display = 'none'; 
 
} 
 

 
convertImgToCanvas();

<div class="span12"> 
 
    <img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/0/08/Ice-and-Fire-showdown_1600x900.jpg" style="max-width: 100%; height: auto;" /> 
 
</div>

Answer 2

Вы можете сделать это с помощью scale.

function convertImgToCanvas(){ 
    var myImgElement = document.getElementById("myImg"); 
    var myCanvasElement = document.createElement("canvas"); 
    myCanvasElement.width = myImgElement.width; 
    myCanvasElement.height = myImgElement.height; 
    var context = myCanvasElement.getContext('2d'); 
    context.scale(myCanvasElement.width/myImgElement.width, myCanvasElement.height/myImgElement.height); 
    context.drawImage(myImgElement, 0, 0); 
} 

Answer 3

Проверьте ссылку ниже. Вы можете преобразовать изображение в элемент холста HTML5: http://lab.abhinayrathore.com/img2canvas/