I want to add the ability to upload custom pngs to my filters

Issue

This Content is from Stack Overflow. Question asked by Mr.Minecraft

i want a button that lets me upload a png that is displayed over my face like so:
enter image description here
this is my code so far,
javascript:

`

let video 

let noseX
let noseY

let catNose
let hat

function preload(){
 custom = 
  catNose = createImg('cat-nose2.png')
  hat = createImg('hat.png')
}

function setup() {
  createCanvas(600, 500);
  video = createCapture(VIDEO)
  video.size(600,500)
  video.hide()
  
  let poseFinder = ml5.poseNet(video)
  poseFinder.on("pose", gotPose)
}

function draw() {
  background(220);
  image(video,0,0,600,500)
  fill(255,0,0)
 // ellipse(noseX,noseY,40)
  catNose.position(noseX-100,noseY-25)
  catNose.size(200,200)
  
  hat.position(noseX-125,noseY-280)
  hat.size(250,250)
}

function gotPose(poses){
  noseX = poses[0].pose.nose.x
  noseY = poses[0].pose.nose.y
}

`

html:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
      <input type="file" id="image-input" accept="image/jpeg, image/png, image/jpg">
  <div id="display-image"></div>
    <script src="script.js"></script>
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

it would be super helpful if anybody could responsd within the next twenty four hours.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?