html5中的画布图像大小
[英]canvas image size in html5
问题描述
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>
The size of the image is becoming bigger and it is not fitting in canvas and also the image is rotated. 
图像的大小变得越来越大，它不适合画布，也可以旋转图像。
How to get original image in canvas? 如何在画布中获取原始图像？
2 个解决方案
解决方案1
3 2013-04-02 06:11:35
Ok, take a look at your reworked code below. 好的，看看下面的重做代码。
Notice "imageObj.src = document.getElementById("tempImg").src;" 注意“imageObj.src = document.getElementById（”tempImg“）。src;” must go after imageObj.onload. 必须追求 imageObj.onload。
I have no access to your locationtxt or your tempImg, so I assume you are sure they are not the source of your problem. 我无法访问您的locationtxt或您的tempImg，因此我认为您确定它们不是您问题的根源。
This line of code will take an image of ANY size and force it to fit in your specified canvas size by scaling it. 这行代码将采用任意大小的图像，并通过缩放它来强制它适合您指定的画布大小。 When it scales, you may get image distortion if your canvas size is not proportional to your image size. 缩放时，如果画布大小与图像大小不成比例，则可能会出现图像失真。
context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);
Here is your code -- just modified a bit :) 这是你的代码 - 只是修改了一下:)
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;
解决方案2
0 2014-04-15 10:34:26
<html>
<head>
<title></title>
</head>
<style type="text/css">
#mycanvas
{
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
var img = new Image, ctx = document.getElementById('myCanvas').getContext('2d');
var img1=new Image;
img.src = 'ship.png';
img1.src='3D025.jpg';
img.addEventListener('load', function () {
var width = img.naturalWidth; // this will be 300
var height = img.naturalHeight; // this will be 400
var interval = setInterval(function() {
var x = 260, y = 0;
return function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img1, 0, y);
ctx.drawImage(img, x, 300,width,height);
x += 1;
if (x > ctx.canvas.width) {
x = 260;
width=width-10;
height=height-10;
ctx.drawImage(img, x, 300,width,height);
}
if (x == 750) {
x = 260;
}
};
}(), 1000/40);
}, false);
}, false);
</script>
<body>
<canvas id="myCanvas" height="600" width="1000"></canvas>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.