Upload HTML Canvas image to Azure Blob storage
Mar 3, 2023
Hi,
I’m attempting to upload a signature to Azure Blob Storage in Canvas.toDataURL() format. The issue I’m having is that the image I’m receiving does not fit the criteria set out by Azure.
Can somebody advise me on how to change it into the necessary form?
Answers (1)
Add Answer
var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];
in controller
byte[] bytes = Convert.FromBase64String(image);
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(AzureString);
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
CloudBlobContainer container = blobClient.GetContainerReference("img");
string ImageFileName = RandomString(5) + ".jpg";
CloudBlockBlob imgBlockBlob = container.GetBlockBlobReference(ImageFileName);
using (MemoryStream ms = new MemoryStream(bytes))
{
imgBlockBlob.UploadFromStream(ms);
}
var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];in controller
byte[] bytes = Convert.FromBase64String(image); CloudStorageAccount storageAccount = CloudStorageAccount.Parse(AzureString); CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient(); CloudBlobContainer container = blobClient.GetContainerReference("img"); string ImageFileName = RandomString(5) + ".jpg"; CloudBlockBlob imgBlockBlob = container.GetBlockBlobReference(ImageFileName); using (MemoryStream ms = new MemoryStream(bytes)) { imgBlockBlob.UploadFromStream(ms); }