我有两个具有不同src url的html img对象。我想合并这两个图像（使用画布），并创建一个合并的img对象。我想给用户从自己的位置选择一个图像，第二个图像将是logo，用户可以改变logo的位置，当点击post按钮时，一个图像对象被生成并可以保存在数据库中。我在写这个javascript对象类型不匹配时遇到一个错误，我不知道问题在哪里。。。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<form name="drawImage" id="drawImage">
<input type="file" id="filename" name="filename" value="hello" />
<canvas id="mycanvas" width="400" height="400"></canvas>
<input type="button" id="mybtn" name="mybtn" value="hello" />
</form>
<script>
$(function(){
var canvas,ctx,img1,img2;
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
if(imagesLoaded == 2) {
// composite now
console.log(img1);
ctx.drawImage(img1, 0, 0);
//ctx.globalAlpha = 1;
ctx.drawImage(img2, 0,100);
}
}
function loadImage(src, onload) {
// http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
function drawImages(){
var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://blog.carazoo.com/wp-content/uploads/2010/11/skoda_logo-300x300.jpg', main);
}
$("#mybtn").click(function(){
//var getImageInput=$("#filename").val();
//var img1 = loadImage(getImageInput, main);
//var img2 = loadImage('play-button.png', main);
drawImages();
});
});
</script>
</body>
</html>
最佳答案
问题是img1和img2在drawImages()内局部重新声明，因此img1范围内的img2和main()变量指向全局范围内未定义的img1和img2。对于canvas和ctx也是一样的，尽管这不会导致任何问题，因为它们只在main()中使用。
简言之，您可以通过移除var内部的drawImages()来“修复”：
function drawImages(){
img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
img2 = loadImage('http://blog.carazoo.com/wp-content/uploads/2010/11/skoda_logo-300x300.jpg', main);
}
此外，您可以从全局范围中删除
canvas和ctx，因为它们只在main()中使用。 var img1, img2;
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
// ...
}
但是，您可能希望对代码进行更彻底的重写，并正确地确定变量的范围。要先加载这两个图像，然后在画布上渲染它们。这是两个截然不同的问题，最好将处理它们的代码分开。
关于jquery - 我正在尝试编写一个实用程序在 Canvas 上绘制两个图像，并想另存为一个图像对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12179918/