We Keep Coding

Failed to convert Canvas to blob. Tainted canvas may not be exported

Abstract:
Canvas convert to blob is failing.
Introduction:
I have a task to generate thumbnail when a user uploads a video.
Approach I took:
I can fetch the video element from input field. (if video is being uploaded for the first time) Or there can be a file that gets loaded in video element when we update information about the video. (Let's say, we want to capture the frame or upload it from local Directory)
Drew the current frame on canvas.
Tried to convert it into a blob.
At 3rd step, I am getting this error that is:
Failed to convert Canvas to blob. Tainted canvas may not be exported
It's something new and I never tried this. When I tried to use toDataUrl (ignore syntax) it gave me the same kind of error.
How can I generate a thumbnail from video and if it's possible then can I fill "upload thumbnail" file input field with generated image or blob?
What's the preferred way of doing something similar?

save Metadata with image, that is retrieved from html5 canvas

what I want to do is to save the image metadata, along with image data, after saving the image using canvas.toDataUrl('image/jpeg') so that next time when I load the image, I should have access to that metadata.
consider the image bellow, here I am drawing the objects in canvas, on mouse over it a tooltip is shown with some data. I am trying to figure out a way through which the metadata can be saved along with the image, when the image is loaded again tooltip should work same as earlier.
while searching for the solution I found that EXIF is used to save metadata to image, but found no direct solution for it most of the solution are using exiftool or any other third party tools/library.

to save the metadata to the image, found not options from front-end, had to do it from back-end (I used node.js). For that I had to make use of the node-exiftool, required installation of exiftool.
bellow are steps for adding the metadata to image:
upload the image and send the metadata to server.
using node-exiftool's .writeMetadata() method write the metadata to the image.
this is done for writing part.
similarly for reading we can make use of the node-exiftool's .readMetadata() method.

Convert string to image and send it to WhatsApp

I'm developing a phonegap app and I need it to be able to convert a string that will be in a localStorage variable into a PNG image and share it on WhatsApp Messenger. I've never done somethin' like that before. The idea of using canvas to generate the Image came to mind but I have no idea how to work it out from there and sent the data I've got from the dataToUrl function to WhatsApp. If someone can give me an idea on how to do it or an alternative way to do it I'd really appreciate. The string will be something like shown below:
"##########################Central Jogos##########################Apostador: testValor Apostado: R$5Valor Retorno: R$6.15Data Aposta: 19/02/2017 15:07Qtd. Jogos: 1-----------------------------------------Vasco X FlamengoEmpate: 1.2310/03/2017 15:30=======================Cambista: Cambista TesteTelefone: (82) 9977-8877"

I just found this cordova plugin that allows you to share images, links, base64 and other things not just on WhatsApp Messenger but also on Facebook, Twitter and a bunch of other apps. I think it might be extremely helpfull. Thank you guys that answered me.
SocialShare GitHub Repo

You can generate a base64 string from a <canvas>.
You need to use the <canvas> element where your image is going to be stored, basically you need to load your image into the canvas.
Then you can use the toDataURL to get the string on base64 format.

Convert your image to Base64 String like these image uri to Base64
Draw an image canvas using this Base64 string Base64 png data to html5 canvas
Reconvert Base64 string to Image using HTML5 Canvas to PNG File
you can also save the canvas image file by using reimg library
just save and share the saved image by step 4 on button click

Upload file with input[type="file"] without a second button to send

I'm setting up a typical profile picture upload and crop feature for a site. I'm looking at how others have set it up and I see that many are managing to have one input type="file" and it not only allows for selecting a file but also calls the PHP or JS to display the image.
I'm completely stuck on how to make it do something after the image has been chosen.
Does any one have a link or suggestion on how to perform this?

One way you could achieve this is to convert the file into a blob, then present it using an HTML5 canvas. Example: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Another option is to issue an AJAX request after the file input has been changed. Do whatever server processing you need to (crop, save, etc.) then return the AJAX call a path to the file. Then just append a new <img src='filepath.jpg' /> to the DOM.

I would upload the image using AJAX, having a API receiving the image. When image has been saved the API-method returns the path of the image.
You can then display the image using the path you recieved from your API-method.

HTML5 save canvas to file on server

i need to create a component using html5 canvas that given an image the user can paint on it and directly (via a kind of save button) upload it's customized version on the server.
Can i use html canvas for it ?
Any suggestion ?
thx in advance

You can get the image as data-url like this:
var dataUrl = document.getElementById('your-canvas').toDataURL();
You could then send this (very long string) to the server and save it to a file after decoding it (it is encoded in base64).
EDIT: Remember to submit this via POST, as suggested in the comments. GET has some length-limits in various browsers, so its likely to exceed those limits with such a huge amout of data.

Note that this is currently dead-on-arrival for Android (up to and including 2.3). Please star this issue - http://code.google.com/p/android/issues/detail?id=7901