初始化时，我发现Bitmap有时没有显示staging。因此，我为100ms设置了一个小的超时时间，似乎可以解决该问题。我正在从事的项目的视频元素上方有一个画布：顶层和底层。video元素是网络摄像头流，我在其中捕获快照并将其放置在画布上。画布也可以用作遮罩，但是在拍摄快照时，该操作独立于视频层。
在placeMask下面的方法中，我尝试粘贴一个BitmapeventListener added（http://createjs.com/docs/easeljs/classes/Bitmap.html）来了解映像何时处于暂存状态，然后才请求getUserMedia。这是行不通的，到目前为止，仅使用timeout似乎可以在100ms处工作（在本地工作，以100 / 1000ms进行远程测试会失败）。在本地，尝试0ms和10ms均未成功。
我认为这可能与正在加载的图像有关，因此添加了一个预加载器，该加载器在CanvasImageSnappe初始化之前发生，但没有成功。
另外，当我说首次加载浏览器时，是指如果用户刷新或再次请求相同的URL，则图像将在登台时显示。如果用户打开新的窗口或选项卡，则无法加载图像。100毫秒解决了这个问题（本地工作，远程工作1000毫秒无效）。
下面的代码并不完整，但是具有与问题或上下文相关的方法。
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
仍然听起来像是图像的（预）加载错误-但是我不太确定，这imagesLoaded是怎么回事？！您是否尝试过先预加载位图并使用该Image-Object创建位图？
var img1 = new Image();
img.onload = function(){
var bitmap = new createjs.Bitmap(img1);
...
};
img.src = 'path/to/img.png';
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句