У меня есть 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
, без обрезки изображения?
3 ответа
Вы не используете 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>
Вы можете сделать это в масштабе.
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);
}
Проверьте ссылку, приведенную ниже. Вы можете конвертировать изображение в элемент HTML5 canvas: http://lab.abhinayrathore.com/img2canvas/
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.