P5.js / ML5.js样式转换循环在第一次运行后崩溃:无法读取未定义的属性“ src”

时间:2018-09-29 18:52:11

标签: javascript p5.js style-transfer

在完成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不够熟悉,无法解决问题所在。任何帮助将不胜感激。

谢谢!

0 个答案:

没有答案