我正在用图像源addBanner()
填充Canvas HTML后尝试添加横幅fillCanvas()
。但是,在我当前的设置中,当我需要时,递延项不会触发。
现在发生的是,在addBanner中,它认为画布大小为150x300。但是,在调用fillCanvas()之后,图像要大得多,为800xZ。加载完所有内容后,画布会加载完整的图像(800xZ),因此横幅广告放置在错误的位置。
那么,如何首先调用filLCanvas()以及完成后如何调用addBanner()?
谢谢。
main-假设$ q被注入控制器
fillCanvas("empty").then(function(canvasOpt) {
window.alert(canvasOpt.cw) // shows 300, but it should be far larger
addBanner(canvasOpt);
},
function(err) {
window.alert(err)
});
fillCanvas()
function fillCanvas() {
// $q
var deferred = $q.defer()
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=start;
img.src = "img/struddle.jpg"
// *****************
// resize image to 800xZ or Zx800
// *****************
var imgOrigWidth = img.width;
var imgOrigHeight = img.height;
var resizeRatio = 1;
if (imgOrigHeight >= imgOrigWidth) {
resizeRatio = 800/imgOrigHeight;
} else {
resizeRatio = 800/imgOrigWidth;
}
function start() {
canvas.width = img.width*resizeRatio;
canvas.height = img.height*resizeRatio + 100;
ctx.drawImage(img, 0, 0, img.width*resizeRatio, img.height*resizeRatio);
var cw=canvas.width;
var ch=canvas.height-100;
}
var canvasOpt = {
ch: canvas.height,
cw: canvas.width
}
// $q
deferred.resolve(canvasOpt);
// HERE I WANT IT TO SHOW THE SIZE OF THE RESIZED IMAGE, BUT IT SHOWS 150x300 (default value)
window.alert("start: " + canvasOpt.cw + "x" + canvasOpt.ch)
return deferred.promise;
}
addBanner(canvasOpt)
function addBanner(canvasOpt) {
var element = document.getElementById('canvas');
if (!element || !element.getContext) {
return;
}
var context = element.getContext('2d');
if (!context || !context.drawImage) {
return;
}
// THIS SHOULD BE THE SIZE OF THE RESIZED IMAGE
var cw = canvasOpt.cw;
var ch = canvasOpt.ch;
window.alert("addBanner: " + ch + "x" + cw)
context.fillStyle = '#0066FF'; // set canvas background color
context.fillRect (0, ch-100, cw, 100); // now fill the canvas
context.fillStyle = '#FFFFFF'; // set text color
context.font = '16px Verdana'; // set text font
context.textBaseline = 'top'; // set text position
context.fillText ('Scan the QR code', ch-100, cw); // set the text with my blogs URL
// create and draw the google generated qr-code image
var google_img = new Image();
google_img.addEventListener('load', function () {
context.drawImage(this, 0, ch-100, 50, 50);
},false);
var chlStr = "Hello Fabrice"
google_img.src = "https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=" + chlStr + "&choe=UTF-8";
} // addBanner()
最佳答案
将“ deferred.resolve(canvasOpt)”移至fillcanvas方法中的start函数,还将图像计算部分移至start方法。
function start() {
// *****************
// resize image to 800xZ or Zx800
// *****************
var imgOrigWidth = img.width;
var imgOrigHeight = img.height;
var resizeRatio = 1;
if (imgOrigHeight >= imgOrigWidth) {
resizeRatio = 800 / imgOrigHeight;
} else {
resizeRatio = 800 / imgOrigWidth;
}
canvas.width = img.width * resizeRatio;
canvas.height = img.height * resizeRatio + 100;
ctx.drawImage(img, 0, 0, img.width * resizeRatio, img.height * resizeRatio);
var cw = canvas.width;
var ch = canvas.height - 100;
var canvasOpt = {
ch: canvas.height,
cw: canvas.width
}
// $q
deferred.resolve(canvasOpt);
// HERE I WANT IT TO SHOW THE SIZE OF THE RESIZED IMAGE, BUT IT SHOWS 150x300 (default value)
window.alert("start: " + canvasOpt.cw + "x" + canvasOpt.ch)
}
指小提琴
http://jsfiddle.net/tedvt37c/1/