[Rich Content Editor] Paste Images into Canvas

[blomas]

This idea has been developed and deployed to Canvas

---

I want the ability to paste images directly into Canvas from the clipboard. An example: I want to use Windows Snipping tool (or any other screenshot tool) to create an image. I then want to CTL-C to copy it and CTL-V to paste it into a quiz or assignment or content page in Canvas. Another example would be Copy-Pasting from a Word document into Canvas. This site is able to do it! I just did it below! Let's get this implemented in Canvas!

[bogardde]

Ooooh, this would be SO useful!

[scottdennis]

This idea has moved to the next stage and will be open for voting among the Canvas Community, from Wed. November 4, 2015 - February 3, 2016.

Check out this doc for additional details about how the voting process works!

[2180]

wow...great idea! i think this will be a great resource and very useful to the students education!      GO TIGERS

[cwendt]

What a time-saver this would be, especially for quizzes which require images!

[James]

When you paste an image into an editor, it is typically stored as a data URI. Not always as Jive automatically converts it to a file with a useless name like "pastedImage_3.png", but enough to cause me concern.

Those data URIs are base64 encoded objects and become part of the page. For those who don't understand that, that means that it is about 33% larger than a binary image and you have to wait for it to download as part of the page. So, when you copy/paste an image into a discussion or onto a page or a quiz, several things happen.

• Images take longer to download than they would if they were uploaded and linked.
• Students have to wait for the image to completely load before they're able to do anything on the page. Someone could upload a couple of hi-resolution images and basically make everything crawl. You may remember the slowly-loading JPEG images on a page that take a long time to load and they slowly fill up the screen. If not, take a look at this 8000x8000 resolution, 16.8 MB picture of the earth from NASA. (by the way, that would be about 21.9 MB with base64 encoding). But this isn't loaded after the page with a data URI, it's loaded as part of the page and nothing else on the page can load until it's done. When files are stored as images and linked, the rest of the page displays and then the images can be loaded afterwards.
• Caching is defeated since the object is part of the page not a separate object. That means that they have to re-download the image every time. The JavaScript that Canvas uses can be cached by the browser, so although it's large, it doesn't need downloaded with every page view. Pictures that are included through the img tag can be cached. But embedding images and storing them as data URIs can't be cached unless the entire page is cached and that doesn't happen with Canvas.
• When an image is saved as a data URI, there is no ALT attribute for the description of the image because there is no img tag to apply the alt description to. That's an accessibility issue.

A long time ago, there were notes to wannabe webmasters to always resize their images to the page so that people didn't have to waste bandwidth and time waiting for a large image to download just to be resized. Lack of bandwidth may not be the issue it once was, but broadband has been redefined to be 25 Mbps or more and there are a lot of rural users who don't have that (including me). Even Facebook recognizes that not everyone has high speeds and is offering 2G Tuesdays to their employees so they can better understand various markets.

Now, if there was a way to take a copy/pasted image, prompt for a filename, automatically save it to a file, and ask for an ALT description (essentially a file upload via copy/paste and then link to the file as an image and not a data URI), you would have something truly awesome..

This feature may help the content-creator's experience, but it is bad for the end-user's experience.

[Stef_retired]

After reading  @James ​'s pellucid description of the effects of such a feature, I decided to downvote it, as it would degrade students' experience.

[James]

Thanks stefaniesanders​, but make sure you're down voting with full information.  After getting some sleep, I modified the post after doing a little more research. You can convert it to an image and save it -- Jive does this -- but creates a randomish filename based on the post number and the number of items you've pasted in that editor. That would clutter the Canvas "files" for a document with random files like "pastedImage_142.png" in the main folder of your course (or perhaps they could make a folder for "pasted images"). Then, if you need to grab a particular image, you'd first have to find the image on your page / quiz / whatever and then go locate it. If you delete an image and re-copy/paste it, there would be no sense of "overwrite", it would be a new image and then you would have stale images lying around in your files.

Most of my opposition hinges on it being a data URI, but as mentioned here, there are still problems, even if it's converted to a image.

I'm still opposed, but I know a lot of people follow you and I wanted you and them to have a fuller picture (no pun intended).

[blomas]

James -

I'd like to address some of your concerns. First, although the image size can be about 33% larger when stored as data URI, gzip mitigates most of that, resulting in an image about 1-2% larger.

• Images will not necessarily take longer to download. Many sites are encoding all of their images as Data URIs as a way to minimize HTTP calls. In today's world the bottleneck tends to be the number of concurrent HTTP calls, not sheer bandwidth.
• Yes, the whole image must be downloaded before it is displayed, but you are overstating the issue by looking at an extreme case. Yet even in that extreme case, I clicked on that image and it displayed as close to instantly as I can tell.
• Caching is not defeated - only caching the images as separate files. Since the image is encoded in the page, the image is cached as part of the page.

Again you are overstating the issue when you speak of bandwidth. The redefinition of what "broadband" means has no bearing in this discussion. I had no issue loading this page, yet the image I posted in the original post was pasted into the rich text editor. I don't believe the whole Internet should look like image-less Craigslist postings because we are concerned about bandwidth. Your Facebook example is just as absurd as the statement I just made. 2G Tuesdays exist to simulate Internet consumption over cell phones in 3rd world countries, not exactly the average use-case for Canvas.

As I said in the original post, there are many sites out there that use this feature successfully - including this very one. I trust that if there is a way to do it successfully (as there obviously is), the good people at Canvas can figure it out.

This is a feature request that will be beneficial to content creators. I don't care how it is implemented. Your suggestion of automatically saving it to a file should be one of the avenues that are explored. Let the people at Canvas explore the idea to see if there is a way to do it with little to no effect to students.

[blomas]

stefaniesanders- Although I disagree that it would necessarily degrade students' experience, I would ask that you reconsider your vote to allow the developers and engineers to explore the feature and determine if there is a way to do it without the negative impact.

[James]

 @blomas ​

Thanks for your insight and I'm glad you've got an fast internet connection. You make some valid points, especially about gzip, but Canvas pages aren't cached, they're regenerated every time they're loaded.

Down voting can actually a good thing. It fosters discussion and that causes it to rise to people's attention faster than just sitting there collecting votes.