初始化时，我发现我的Bitmap有时不会显示在staging上。出于这个原因，我设置了100ms的小超时，似乎解决了这个问题。我正在研究的项目，在视频元素的顶部有一个画布：顶层和底层。视频元素是网络摄像头流，我捕捉快照并将其放在画布上。画布也可用作蒙版，但拍摄快照时独立于视频图层进行操作。
在下面的placeMask方法中，我尝试使用Bitmap eventListener added（http://createjs.com/docs/easeljs/classes/Bitmap.html）来了解图像何时处于暂存状态，然后才请求getUserMedia。这不起作用，目前只使用timeout似乎工作在100毫秒（在本地工作，远程测试100 / 1000ms它失败）。在本地，尝试了0ms和10ms没有成功。
我认为这可能与正在加载的图片有关，所以添加了一个在CanvasImageSnappe初始化之前发生的预加载器，但没有成功。
另外，当我说第一次浏览器加载时，我的意思是如果用户刷新或再次请求相同的URL，则图像将显示在分段上。如果用户打开新窗口或选项卡，则无法加载图像。 100ms解决了这个问题（在本地工作，远程1000ms不起作用）。
以下代码不完整，但有与问题或背景相关的方法。
function CanvasImageSnapper() {
this.init();
}
CanvasImageSnapper.prototype = {
init: function () {
this.setVars();
this.setListeners();
// this fix the issue but I'd like to know the reason why
setTimeout(function () {
this.placeMask(this.setWebcam.bind(this));
}.bind(this), 100);
},
setVars: function () {
this.myCanvas = document.querySelector('#myCanvas');
this.myCanvas.style.width = window.innerWidth + 'px';
this.myCanvas.style.height = window.innerWidth / (16/9) + 'px';
this.moduleContainer = document.querySelector('.p-canvas-webcam-prototype');
this.moduleContainer.style.width = window.innerWidth + 'px';
this.moduleContainer.style.height = window.innerWidth / (16/9) + 'px';
this.myCamera = document.querySelector('#my_camera');
this.videoStream = this.myCamera.querySelector('video');
this.stage = new createjs.Stage('myCanvas');
this.stage.canvas.width = parseInt(this.myCanvas.style.width);
this.stage.canvas.height = parseInt(this.myCanvas.style.height);
this.ratio = this.stage.canvas.width / this.stage.canvas.height;
createjs.Touch.enable(this.stage);
this.el_my_result = document.getElementById('my_result');
this.el_take_snapshot = document.querySelector('.take_snapshot');
this.container = new createjs.Container();
this.handler_container = new createjs.Container();
this.dragBox = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawRect(0, 0, this.stage.canvas.width, this.stage.canvas.height))
this.dragBox.alpha = 0.01; // hit area needs to be at least `0.01`, but leaving almost transparent to see through
this.stage.addChild(this.dragBox);
this.btnPrint = document.querySelector('.btn-print');
this.snapshot = null;
this.shape_size = { w: 10, h: 10 };
this.maskImage;
this.btnDownload = document.querySelector('.btn-download');
this.shapes;
this.webCamMaxWidth = 1280;
this.webCamMaxHeight = 720;
this.webCamSizeRatio = 16 / 9;
this.snapshots = [];
this.el_remove_snapshot = document.querySelector('.remove_snapshot');
this.galleryThemes = document.querySelectorAll('.gallery-selector ul li');
this.maskName = 'mask_01';
// cache
this.cached = {
images: {
'mask_01': new createjs.Bitmap('img/mask_01.png'),
'mask_02': new createjs.Bitmap('img/mask_02.png'),
'mask_03': new createjs.Bitmap('img/mask_03.png'),
}
};
// mandrill api key
this.mandrillApiKey = 'xxxxxxxxxxx';
},
setListeners: function () {
// disable to improve performance
//createjs.Ticker.addEventListener("tick", this.tickHandler.bind(this));
this.el_take_snapshot.addEventListener('click', this.snapHandler.bind(this));
this.dragBox.addEventListener("mousedown", function (event) {
var offset = new createjs.Point();
offset.x = this.stage.mouseX - this.container.x;
offset.y = this.stage.mouseY - this.container.y;
event.target.addEventListener("pressmove", function (event) {
this.container.x = event.stageX - offset.x;
this.container.y = event.stageY - offset.y;
this.handler_container.x = this.container.x;
this.handler_container.y = this.container.y;
this.stage.update();
}.bind(this));
}.bind(this));
this.btnPrint.addEventListener('click', function (e) {
this.print();
}.bind(this));
window.addEventListener('resize', this.winResizeHandler.bind(this));
this.btnDownload.addEventListener('click', function () {
this.hideHandlers();
this.downloadImg();
}.bind(this));
window.addEventListener('showHandlers', function () {
this.handler_container.alpha = 1;
this.stage.update();
}.bind(this));
Webcam.on('load', function () {
this.camFitToScale();
}.bind(this));
this.el_remove_snapshot.addEventListener('click', function () {
this.removeShapshotHandler.call(this);
}.bind(this));
var context = this;
for (var i = 0; i < this.galleryThemes.length; i++) {
this.galleryThemes[i].addEventListener('click', function () {
// clear existing
if (context.maskImage) {
context.stage.removeChild(context.maskImage);
context.stage.update();
}
context.maskName = this.getAttribute('data-mask-name');
context.placeMask.call(context, false);
});
}
},
placeMask: function (callback) {
this.maskImage = this.cached.images[this.maskName];
this.maskImage.scaleX = parseInt(this.myCanvas.style.width) / this.maskImage.image.width;
this.maskImage.scaleY = parseInt(this.myCanvas.style.height) / this.maskImage.image.height;
this.stage.addChild(this.maskImage);
this.stage.update();
if (typeof callback === "function") {
callback.call(this);
}
}
}
为了清楚预加载器，我附上了代码，所以我的意图很明确。我不知道这是否有帮助，因为可能在Bitmap构造函数上加载图像会再次获取图像，忽略任何浏览器缓存？
var arrImgList = ['img/mask_01.png', 'img/mask_02.png', 'img/mask_03.png'];
imagesLoaded(arrImgList, function( instance ) {
var canvasImageSnapper = new CanvasImageSnapper();
window.canvasImageSnapper = canvasImageSnapper;
});
您可以在此处找到完整代码：http://pastie.org/private/371jvrb5i1vmtz0e28bnvw
答案 0 :(得分：2)
仍然听起来像图像的（预）加载错误 - 但是我不太确定，imagesLoaded正在做什么？！您是否尝试首先预加载位图并使用Image - 对象创建位图？
var img1 = new Image();
img.onload = function(){
var bitmap = new createjs.Bitmap(img1);
...
};
img.src = 'path/to/img.png';
答案 1 :(得分：0)
根据 // preload
var arrImgList = ['img/mask_01.png', 'img/mask_02.png', 'img/mask_03.png'],
loaded = 0;
for (var i = 0; i < arrImgList.length; i++) {
var img = new Image();
img.addEventListener('load', function () {
loaded = loaded + 1;
if (loaded === Object.keys(this.cached.images).length) {
this.placeMask(this.setWebcam.bind(this));
}
}.bind(this));
img.src = arrImgList[i];
this.cached.images['mask_0' + (i + 1)] = new createjs.Bitmap(img);
}
回答，这是解决方案：
select p1.Client, sum(p1.Amount) Amount
from
(
select Client, MonthName, Amount
from
(
select
Client,
isnull(Month1, 0) Month1,
isnull(Month2, 0) Month2,
isnull(Month3, 0) Month3,
isnull(Month4, 0) Month4,
isnull(Month5, 0) Month5,
isnull(Month6, 0) Month6
from Payment
) pm
unpivot
(
Amount
for MonthName in (Month1, Month2, Month3, Month4, Month5, Month6)
) unpvt
) p1
left join
(
-- get last month with null value
select Client, max(MonthName) MonthName
from
(
select
Client,
isnull(Month1, 0) Month1,
isnull(Month2, 0) Month2,
isnull(Month3, 0) Month3,
isnull(Month4, 0) Month4,
isnull(Month5, 0) Month5,
isnull(Month6, 0) Month6
from Payment
) pm
unpivot
(
Amount
for MonthName in (Month1, Month2, Month3, Month4, Month5, Month6)
) unpvt
where unpvt.Amount = 0
group by unpvt.Client
) p2 on p2.Client = p1.Client and p1.MonthName <= p2.MonthName
where p2.Client is null
group by p1.Client
having count(p1.Client) >= 3