My canvas has image which programly generated from local file or from images from internet. When I try to save it using toDataURl function I get secure error. How can I save result (without server, using only js ) and is it possible?
I know about security rule but maybe there is some solution to bypass this rule
All my code is in github if need
Shame! Don't bypass rules built to provide security for our users.
The key to satisfying CORS security and still getting what you need is to let the user select the image file you need to load into canvas.
If the user selects the file, CORS security is satisfied and you can use the canvas as you need (including using canvas.toDataURL to save the canvas).
Here are the steps to let a user select a file from their local drive:
Add an html input element with type="file"
The user clicks browse on this element and selects their file
When the user clicks OK, use window.URL.createObjectURL to create a URL from their selected file.
Create a new Image and set its source to the URL you created in #3.
Use context.drawImage to draw your new image on the canvas.
The resulting canvas is CORS compliant so canvas.toDataURL will work.
Here's example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
$("#fileInput").change(function(e){
var URL = window.webkitURL || window.URL;
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
canvas.width=img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
ctx.fillStyle="black";
ctx.fillRect(0,canvas.height-30,canvas.width,30);
ctx.fillStyle="white";
ctx.font="18px verdana";
ctx.fillText("I'm OK with CORS!",5,canvas.height-8);
}
img.src = url;
});
$("#save").click(function(){
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}); // end $(function(){});
</script>
</head>
<body>
<input type="file" id="fileInput">
<button id="save">Save</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Related
I am using p5js and I am trying to load and display some images in my directory. I am trying to use the loadImage() method in my preload function to load an image. However, when I run the program, I get these errors
Fetch API cannot load file:///Users/mainuser/Documents/school/Senior/FinalProject/imgs/arms_up.png. URL scheme "file" is not supported.
🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (imgs/arms_up.png) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)
TypeError: Failed to fetch
at fetch (p5.js:28096)
at p5._main.default.loadImage (p5.js:80673)
at p5.js:62949
at preload (script.js:118)
at p5._start (p5.js:62905)
at new p5 (p5.js:63261)
at _globalInit (p5.js:62189)
My imgs folder is within the same folder as my index.html
My guess is that fetch() might need an actual URL instead of a file path.
Anybody else run into this problem? I've attached my code below (i took out irrelevant code). Thank you!
index.html
<!DOCTYPE HTML>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#teachablemachine/pose#0.8/dist/teachablemachine-pose.min.js"></script>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pose Game</h1>
<button type="button" onclick="init()">Start Game!</button>
<button type="button" onclick="restart_game()">Restart Game</button>
<div id="main-div">
<div id="flex-div">
<div id="webcam-div">
<canvas id="canvas"></canvas>
</div>
<div id="p5-div"></div>
</div>
</div>
</body>
</html>
script.js
let arms_up_png;
let left_arm_up;
let right_arm_up;
function preload() {
arms_up_png = loadImage("imgs/arms_up.png");
}
function setup() {
var canvas = createCanvas(400, 400);
canvas.parent('p5-div');
}
function draw() {
background('green');
image(arms_up_png, 50, 50, 20, 20);
}
You are correct that fetch() will not work with local file paths, and because p5js needs to load the contents of the image file in order to display it you also cannot use local file paths with the p5js loadImage() function. In order to run your sketch locally you will need to use a local web server. The Visual Studio Code Live Server extension is quite handy for this purpose.
I am trying to add p5.js to the background of one section in my webpage. I am new to javascript and can't figure out how to bind the two parts together.
You need to add code in your setup.
Make sure you have the function in a script tag in the html as well.
Note you do not add # in the .parent().
var myCanvas = createCanvas(winWidth, winHeight);
myCanvas.parent("idnameofdiv");
if you are inserting multiple p5js canvas in one page and are already using the form new p5(sketch), you can just pass the id of your div as second parameter, like new p5(sketch, idnameofdiv)
Because the function sketch should be unique (if you don't use an IIFE), I like to put the id in the name of the sketch function as well
function sketch_idnameofdiv(p) {
p.setup = function () {
p.createCanvas(400,400);
}
p.draw = function () {
// stuff to draw
}
}
new p5(sketch_idnameofdiv, 'idnameofdiv')
if you don't need to insert multiple p5js canvas in one page, I guess you are looking for Michael Paccione's answer
P5.js gives you an html canvas that you can use for positioning your sketch.
Here is an example of using a canvas as the background of a div:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
<script src="processing-1.4.1.min.js"></script>
<div id="canvasContainer">
<canvas data-processing-sources="rectangles.pde"></canvas>
</div>
</body>
This is Processing.js instead of P5.js, but the idea is the same. Try googling something like "html canvas as background" for a ton of results. Try something out, and post an MCVE if you get stuck.
To be more detailed about the answer:
function setup() is a function which executes ojnly once at the startup.
function draw() is a function which executes after setup() and it reloads on every frame of the picture.
The code goes like this:
<!DOCTYPE html>
<html>
<head>
<title>P5.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
<script>
function setup() {
var canvas = createCanvas(400, 400);
canvas.parent('canvasForHTML');
}
function draw() {
background(127);
}
</script>
</head>
<body>
<h1>Canvas for visualization</h1>
<div id="canvasForHTML"></div>
<p>Move your mouse around to see circles.</p>
</body>
</html>
Check this:
https://jsfiddle.net/sugandhnikhil/74Ltdy8z/1/
Can anyone explain why the responsive picture image is still firing using Chrome Canary 42.0.2302.2 after it has been removed (works as expected in IE11 and FF 35.0.1 - in Chrome 40.0.2214.111 m it is broken, but interestingly, it also downloaded both images straight away!).
To test, open the test page with Chrome Dev Tools open on the Network tab. Take note of the image that has been displayed. Tap anywhere on the page to empty the content. Now resize the page and note that the other images are downloaded despite the picture element being removed from the page.
<!DOCTYPE html>
<html>
<head>
<title>Test Picture Element</title>
<meta charset="utf-8">
</head>
<body>
<picture>
<source srcset="http://placehold.it/768/f00/fff" media="(max-width: 768px)">
<source srcset="http://placehold.it/992/0f0/fff" media="(max-width: 992px)">
<img srcset="http://placehold.it/1200/00f/fff">
</picture>
</body>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').on('click', function() {
$('body').empty();
});
});
</script>
</html>
JSFiddle for your convenience: http://jsfiddle.net/5qwLus59/4/
Because Mutations aren't set up correctly in Chrome. It's similar to how people sometimes write their JS code.
For example:
$('.nav').each(function(){
var $nav = $(this);
var sizeNav = function(){
//some code
};
$(window).on('resize', sizeNav);
});
In fact they should do something like this:
$('.nav').each(function(){
var $nav = $(this);
var sizeNav = function(){
//some code
};
$(window).on('resize', sizeNav);
$nav.on('remove', function(){
//destroy code
$(window).off('resize', sizeNav);
});
});
This is a serious issue, please report this!:
https://code.google.com/p/chromium/issues
I am new to coding so I am looking for the simplest way to take and image and show or hide it based either on one button or via radio button controls. Currently the image is on as an but i can use the any recommend method. If at all possible from a different page on my site.
For a button, you could use
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "IMAGE_URL_HERE";
img.height = IMAGE_HEIGHT;
img.width = IMAGE_WIDTH;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
I am new in jquery I desperately need some help in running this code.I am trying to create a fade in-fade out image banner with 4 images within div tag, with the help of a function fadingbanner() which calls itself recursively and is initiated by a settimeout function.But for some reason its not working.Please help....
<HTML>
<HEAD>
<script type= "text/javascript" src="C:\Documents and Settings\A\Desktop\jquery-1.9.1.js"></script>
<SCRIPT>
<div>
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" id = "i1">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp2.jpg" id = "i2">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp3.jpg" id = "i3">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp4.jpg" id = "i4">
</div>
function fadingbanner()
{
$(document).ready(function(){
$("#i1").fadeOut(2000,function(){
$("#i2").fadeIn(2000,function(){
$("#i2").fadeOut(2000,function(){
$("#i3").fadeIn(2000,function(){
$("#i3").fadeout(2000,function(){
$("#i4").fadeIn(2000,function(){
$("#i4").fadeout(2000,function(){
fadingbanner();
});
});
});
});
});
});
});
}
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME = "bannerimage" src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" height = "200" width = "600" onload = "settimeout("fadingbanner()",1000)">
</BODY>
</HTML>
Take out the function and it should work ok. It is only defining a function and never running it. If it did run it, all it would do is schedule the code to run when the document finishes loading.
You also want to hide all but the first picture at the start.
So it should be like:
$(document).ready(function(){
$("#i2, #i3, #i4").hide();
$("#i1").fadeOut(2000,function(){
... all that other stuff
});
});
Here is a fiddle showing it: http://jsfiddle.net/ePBkX/1/
I borrowed the pictures there from the fiddle attached to this, which you might want to read: jQuery fade out then fade in