We Keep Coding

HTML how to get canvas resource file?

The picture on the HTML page is represented as a canvas, but I have problems getting the source image name of this canvas, using javascript.
Page: https://www.futbin.com/22/squad-builder
I found this image in the page resources:
But how to get it programmically? I mean, if i have:
var canvas = document.getElementById('field-area')
How to get the file name? Result should be "field_1920x1080.png?v=8"

You can use HTMLCanvasElement.toDataURL to get the image drawn on the canvas base64 encoded
var canvas = document.getElementById('field-area');
var b64url = canvas.toDataURL('image/png');
This will return the url for the image itself, i don't think you can get the Asset name directly from a canvas element without inspecting the code on the website

EJBEAN is right, the canvas element doesn't know what resources were used to draw.
Why don't you use dataset to keep an eye on what you used?
var canvas = document.getElementById('field-area');
// ... draw resource here
canvas.dataset.resource = "field_1920x1080.png";
It's an easy way to keep data stored for any element on your page.

Can Html5's FileReader read Images as base64

I'm using a FileReader to display images choosed by the user with a FileUploader into an img
$('#FileUploader').onchange(function(){
var oFile = $('#attached-file')[0].files[0];
oReader.readAsDataURL(oFile);
oReader.onload = function (e) {...//partfn..}
}
Anyway the img has initially takes the user's profile image which is loaded from the database as a base64 image.In that {partfn} there are some things that i want to apply even for the initial image so i thought about doing this:
if (!oFile)
oFile= //receive the image from database so the FileReader read it.
but i failed using readAsDataURL and ReadAsBinary .
Thank you

How to encrypt and decrypt image files online?

I'm working on a web application that involves loading images into a canvas object, then manipulating those images beyond recognition. I need to hide the original source image file (a jpeg) so that the user on the client side should not be able to use dev tools to see the original image.
I have tried to encode the images as a base64 and load it via a JSON data file, but even with this method, the inspector tool still shows the original image file (when it is set as the src of my javascript image object). Is there some way that I can encrypt and decrypt the image files, so that the user has no way of seeing the original image (or have it be some garbled image, for example)? Preferably I'd like to do this on the client side, as all my code is client side at the moment. Thanks in advance!
Here is my code for loading the base64 encoded image data via a JSON file:
//LOAD JSON INSTEAD?
$.getJSON( "media/masks.json", function( data ) {
console.log("media/masks.json LOADED");
//loop through data
var cnt = 0;
for (var key in data)
{
if (data.hasOwnProperty(key))
{
// here you have access to
//var id = key;
var imgData = data[key];
//create image object from data
var image = new Image();
image.src = imgData;
console.log('img src: '+ imgData);
var elementId = $scope.masks[cnt].id;
// copy the images to canvases
imagecanvas = document.createElement('CANVAS');
imagecanvas.width = image.width;
imagecanvas.height = image.height;
imagecanvas.getContext('2d').drawImage(image,0,0);
imageCanvases[elementId] = imagecanvas;
}
cnt++;
}
});
This is what I see in the Chrome dev tools Network inspector (exactly what I'm trying to avoid):

I need to hide the original source image file (a jpeg) so that the user on the client side should not be able to use dev tools to see the original image.
That's not possible. There is always a way to get at the image using developer tools. Even if there wasn't, a simple screen capture would defeat whatever measures you put in place.

Retrieving the absolute URL of a temporary canvas element on page

I created a coupon-creator system that uses HTML 5 canvas to spit out a jpg version of the coupon you create and since I'm not hosting the finalized jpg on a server, I am having trouble retrieving the URL. On some browsers when I drag the image into the address bar all I get is "data:" in the address bar. But on windows, if I drag it into an input field, sometimes it spits out the huge (>200 char) local-temp url. How can I use javascript(?) to find that exact temporary URL of the image generated by my coupon creator and be able to post it on an input form on the same page? Also, it'd be very helpful if you guys know the answer to this as well, as I assume it is correlated with the retrieval of the URL: When I click the link that says "Save it" after it's generated, how can I have it save the created image to the user's computer? Thanks a lot!
This is what I'm using in JS right now to generate the image:
function letsDo() {
html2canvas([document.getElementById('coupon')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/jpeg');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var mycustomcoupon = new Image();
mycustomcoupon.src = data;
//Display the final product under this ID
document.getElementById('your_coupon').appendChild(mycustomcoupon);
document.getElementById('your_coupon_txt').style.display="block";
}
});
}
Here is the live URL of the creator: http://isleybear.com/coupon/

I ended up dumping this code into the js stated above. It was a pretty simple fix. Then to test it, I set an onclick html element to show the source.
var mycustomcoupon = document.getElementById('your_coupon');
mycustomcoupon.src = data;
}
});
}
function showSource(){
var source = document.getElementById('your_coupon').src;
alert(source);
}

Unit8Array to base64 conversion and then displaying image in browser issue

I have a Unit8Array in a mongodb that represents a png image. I pull the array out and convert it to base64 using javascript (in meteor client side) so that I can display it in the browser. The code is as follows
var blob = new Uint8Array(Tester.findOne().image);
var base64String = btoa(String.fromCharCode.apply(null, blob));
var src = 'data:image/png;base64,' + base64String + '';
console.log(src);
Where Tester.findOne().image is my mongodb collection containing the Uint8Array.
I take the src once it is logged and I paste it into the browser. The generic broken image icon appears (see below). However when I click the broken image in the browser and say save to desktop, it downloads the file and when I open it the png image appears as expected.
After I Download the Image:
When I directly try to assign it to <img src = 'data'>:
Adding data as img source or by using document.findElementbyId("img") then changing img.src: