Develop Reference

WYSIWYG Texteditor Image Delete/Upload Logic

Im using laravel with summernote wysiwyg text editor. I want user to be able to insert images to the text.
First i tried using the default summernote upload method. Basically it turns upload image to a base64 data url. Then after posting it, in a controller, that base64 is decoded into an actual image, saved to the server, and the img that src part is turned into a public image url that leads to the current server.
This worked fine with small images. But it didn't work well with big images. Post didn't work and i didn't get any error from anywhere. I assumed that it was because of the base64 part. I also saw THIS THREAD which made me wanna change base64 part even more.
So i switched to using onImageUpload callback without even thinking about it much. I saw lots of tutorials suggesting it.
With this callback, whenever user insert a image to the editor (before the post), OnImageUpload function is called in js. In that function, ajax sends to image to the controller, controller saves the image to the server and responds with its public url. Finally editor uses that url to show the image in the editor.
Issue starts here with deleting images.
There is a OnMediaDelete function which has issues. It does not work with delete/backspace key for example. And even if that worked properly, a user can insert pictures and leave the page (or use one bugs of the onMediaDelete callback) which means there isn't a easy way to determine if the uploaded image is actually used in a text or not. Server would be filled with unused images?
How do you deal with this? Should i upload the images to a temp file during the editing and carry them to a actual folder if there are being used after the post? This would require stuff like cron to keep temp folder empty won't it? Is this how people deal with this?
Or should i just disable uploading images with text editor? Maybe a small content management for images in another part of the server?
Whole thing feels so simple but i am really struggling with it. I feel like i am missing a huge point here. Please help me. Sorry for this weird question. Thank you

Image source path is converting into blop instead of real path in tinyMCE editor

I have an issue with latest tinyMCE editor, whenever I try to select and edit the image, it's source is converting into blob path like this.
blob:http://localhost/87d42e34-9961-412c-914b-dc6a77ab68e0
Did anyone of you face this issue or resolved... ?
Please help

When you edit images using the TinyMCE Image Tools you will get one of these encoded images - that is how the Image Tools work.
What you can then do is configure TinyMCE to upload this image and you can store that image as you see fit for your application.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that the Image tools will create one of these encoded images whenever you edit an image. TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.

Prevent caching of Images on webpage

I am using an IHttpHandler to display an image stored in an azure blob on a webpage. This works fine. I also give the user the ability to rotate the image. The code to rotate the image is working. However when I then try to show the rotated image to the user:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=blobFileName;
the image shown on the page is not updated although the image stored at 'blobFileName' has been changed. After some trial and error I found that if I store the rotated blob under a new file name, say 'blobFileNameRotated' the code:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=blobFileNameRotated;
works and displays the rotated file. I assume that the original code doesn't work because the image has been cached by the browser? I tried running the code in a couple of browsers and found that in Chrome the original code works, but only for small files, and that it doesn't work at all in IE11.
My question is how can I control how a browser caches the image file (if that is the problem) and force the browser to re-display the image even if I haven't changed the file name. I tried setting src to a different file and then back to the blob file but that didn't work.

Not really an Azure issue but a few things to try:
You could add a cache-buster to your Image Handler URL. I'd recommend just appending a random number on the end to force the browser to re-request the URL. The problem is no image will ever be cached. Example:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&m=" + Date.now();
Use the same approach but output the number of images to be shown and change Date.now() to am image name / ID so that we as you rotate you will eventually get the same image which should be cached.
// output using some server-side logic.
var imageIds = new Array("ImageA","ImageB","ImageC");
// in an eventHander have similar to:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=" + imageIds[currentImage]
Make sure you set the correct cache headers in your hander's C# code. See Caching ASHX Image Response

Sorry for the slow response to this, my solution was sort of working so I've only just got round to testing out Simon's better solutions. I thought I would add some other things I've found out along the way in case others come to this question looking for information about blobs and images.
My solution involved changing the name of the file each time I rotated it. This meant that I stored a new blob for each 90 degree rotation. This worked but Simon's solution just involves changing the call to the imagehandler so the blob filename doesn't need to change.
I initially ran into problems because I didn't set the content type of the blob after I had rotated it. When I then tried to use the image in a report, the code complained because it wasn't an image type.
Note that if you want to copy the content type from the blob you are rotating it is not available after you have executed:
Dim blob As ICloudBlob = GetBlob(sContainer, blobFileName)
but only after the blob has been downloaded:
blob.DownloadToByteArray(byteData, 0)
This tripped me up at another time as well because I assumed that a blob had been found because I didn't get an error on the dim blob as line of code when in fact it couldn't have been found because I'd passed in the wrong container name.
Happy blobbing.

upload generated image to server

This example shows a map created with the ammap library. This library creates the map using SVG. I want to use this map in a PDF/XLS report that's generated on the server-side, so the first step (I think) is to convert it into an image format that can be embedded in PDF/XLS documents.
If you click the Export button the SVG is converted to a base64-encoded PNG and added to the DOM. In other words, the following element is added to the DOM (base64 encoding abbreviated)
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAAgAElEQVR4nOydd3hU55n26aJJAoHoiN6r6WDAuFFscMXdxhgbG2PADWOK4ySbuok32V3vJrGdsmmbOP6SdbLxRqOu6XPOgCRUZ0aj3jUz0vQz9f7+ONJIozqjM">
However, rather than appending the PNG to the DOM, what I really want to do is upload the image to the server, is this possible?

I think you could send your png image to the server in a post request. With luck you could even get the .pdf result in that request. Check the instructions on how to retrieve the binary data for your image: Get image data in JavaScript? (Just noticed that you already have the base64 data, so you are already half the way towards the solution)

Compare two images for equality (cross domain)

I'm looking for a way to check whether a specific image has been loaded on a webpage with Selenium IDE.
My first try was to generate a hash value of the image but this doesn't seem to be possible with javascript. I then found out that you can base64 encode an image if you load it into a canvas and then call toDataUrl(). However this doesn't work if the image is located on another domain.
My image server provides a standard "image not found"-image. I want to check if a specific image was successfully loaded by comparing the loaded image against the failure image. Do you have any ideas how this can be achieved?

Have you looked at 'selenium signature' as a plug in to the ide? https://addons.mozilla.org/en-US/firefox/addon/selenium-ide-signature/
It will make a crc32 signature of the element like *html=50D5FBD3*css=5BBF6784*img=81AD9F9D*
You'll only need the *img=81AD9F9D* portion to validate an image.