在完成this精彩的教程之后,我设法使用自己的输入图像来设置样式转换应用。当我尝试将其从一个图像放大到两个图像以便用户选择他们的图像时,第一次迭代后就会崩溃。
工作脚本在这里。它加载图像,从网络摄像头加载流,然后将样式转换应用于页面上显示的网络摄像头视频,使其看起来像源图像。
let video;
let styleMountain;
let styleFuchun;
let resultImg;
let fuchunButton;
let mountainButton;
function fuchunPress() {
styleFuchun.transfer(gotResultFuchun);
}
function mountainPress() {
styleMountain.transfer(gotResultMountain);
}
function setup() {
//the .parent creates a dom element with that label
createCanvas(320, 240).parent('canvasContainer');
//grabs video from webcam
video = createCapture(VIDEO);
//hides the original video because all you care about is the
//tranformed video
video.hide();
//creates the image item
resultImg = createImg('');
//hides it
resultImg.hide();
//tells ml5 where to find the model, where do get the input,
//and triggers a callback function
styleMountain = ml5.styleTransfer('models/mountainclimber', video, modelLoaded);
styleFuchun = ml5.styleTransfer('models/fuchun', video, modelLoaded);
//this is the button to choose Fuchun model
fuchunButton = createButton('Fuchun');
//and the action that is activated when the button is pressed
fuchunButton.mousePressed(fuchunPress);
//this is the button to choose Fuchun model
mountainButton = createButton('A Mountain Climber');
//and the action that is activated when the button is pressed
mountainButton.mousePressed(mountainPress);
}
//the image is hidden in the other functions so that it
//can be drawn here
function draw() {
image(resultImg, 0, 0, 320, 240);
}
//this triggers when the model loads to initiate gotResult
function modelLoaded() {
//selects the item in the html with the label 'status'
//and changes the html to new text
select('#status').html('Robots Assembled');
//TODO: I think this should be happen in the *Press functions above
//initiates the style transfer process
//style.transfer(gotResult);
}
//this just keeps looping and updating the image
function gotResultFuchun(err, img) {
//adds the atribute of 'src' to the object resultImg
resultImg.attribute('src', img.src);
//keeps doing the transfer
style.transfer(gotResultFuchun);
}
我更新后的脚本旨在增加一个步骤,用户可以按此按钮在两个不同的源图像之间进行选择,以便将其样式应用于网络摄像头图像。
let video;
let styleMountain;
let styleFuchun;
let resultImg;
let fuchunButton;
let mountainButton;
function fuchunPress() {
styleFuchun.transfer(gotResultFuchun);
}
function mountainPress() {
styleMountain.transfer(gotResultMountain);
}
function setup() {
//the .parent creates a dom element with that label
createCanvas(320, 240).parent('canvasContainer');
//grabs video from webcam
video = createCapture(VIDEO);
//hides the original video because all you care about is the
//tranformed video
video.hide();
//creates the image item
resultImg = createImg('');
//hides it
resultImg.hide();
//tells ml5 where to find the model, where do get the input,
//and triggers a callback function
styleMountain = ml5.styleTransfer('models/mountainclimber', video, modelLoaded);
styleFuchun = ml5.styleTransfer('models/fuchun', video, modelLoaded);
//this is the button to choose Fuchun model
fuchunButton = createButton('Fuchun');
//and the action that is activated when the button is pressed
fuchunButton.mousePressed(fuchunPress);
//this is the button to choose Fuchun model
mountainButton = createButton('A Mountain Climber');
//and the action that is activated when the button is pressed
mountainButton.mousePressed(mountainPress);
}
//the image is hidden in the other functions so that it
//can be drawn here
function draw() {
image(resultImg, 0, 0, 320, 240);
}
//this triggers when the model loads to initiate gotResult
function modelLoaded() {
//selects the item in the html with the label 'status'
//and changes the html to new text
select('#status').html('Robots Assembled');
//TODO: I think this should be happen in the *Press functions above
//initiates the style transfer process
//style.transfer(gotResult);
}
//this just keeps looping and updating the image
function gotResultFuchun(err, img) {
//adds the atribute of 'src' to the object resultImg
resultImg.attribute('src', img.src);
//keeps doing the transfer
style.transfer(gotResultFuchun);
}
//this just keeps looping and updating the image
function gotResultMountain(err, img) {
//adds the atribute of 'src' to the object resultImg
resultImg.attribute('src', img.src);
//keeps doing the transfer
style.transfer(gotResultMountain);
}
这很好用。 。 。一旦。从网络摄像头加载第一个样式化的帧后,图像冻结,并且在控制台中出现以下错误:
Uncaught (in promise) TypeError: Cannot read property 'src' of undefined
at gotResultFuchun (sketch.js:69)
at callcallback.js:14
我对javascript不够熟悉,无法解决问题所在。任何帮助将不胜感激。
谢谢!