javascript - html5中的 Canvas 图像大小

Question

var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.src = document.getElementById("tempImg").src;
imageObj.onload = function () {
    var x = 188;
    var y = 30;
    var width = 200;
    var height = 137;
    context.drawImage(imageObj, x, y, width, height);
    context.font = "20pt Calibri";
    context.fillText(locationtxt, 40, 40);
};

<canvas id="canvasPnl" width="132" height="120" style="border:0px solid #d3d3d3;"></canvas>

图片变大了，不适合 Canvas ，而且图片旋转了。

如何在 Canvas 中获取原始图像？

Answer 1

好的，请看下面您修改后的代码。

注意“imageObj.src = document.getElementById("tempImg").src;”必须在之后 imageObj.onload。

我无权访问您的 locationtxt 或您的 tempImg，因此我假设您确定它们不是问题的根源。

这行代码将获取任意大小的图像，并通过缩放它来强制它适应您指定的 Canvas 大小。缩放时，如果 Canvas 大小与图像大小不成比例，则可能会出现图像失真。

context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);

这是您的代码——只是稍微修改了一下:)

var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.onload = function () {
    context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);
    context.font = "20pt Calibri";
    context.fillText(locationtxt, 40, 40);
};
imageObj.src = document.getElementById("tempImg").src;