Конвертировать 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, без обрезки изображения?

javascript jquery html css html5-canvas

1

faizi 14 Дек 2015 в 14:45

Answer 1

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

В третьем примере вы можете указать параметры x, y, width и height источника и получателя: 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>

2

Shomz 14 Дек 2015 в 12:20

Answer 2

Вы можете сделать это в масштабе.

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

1

Rafał Łużyński 14 Дек 2015 в 12:00

Answer 3

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

0

prajakta 14 Дек 2015 в 12:12

Конвертировать HTML-элемент img на холст

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript