How to scale an image (in data URI format) in JavaScript (real scaling, not using styling)

Posted by 103067513055141045393 on Stack Overflow See other posts from Stack Overflow or by 103067513055141045393
Published on 2010-03-25T14:00:17Z Indexed on 2010/03/25 14:03 UTC
Read the original article Hit count: 326

Filed under:

JavaScript

|

image-manipulation

|

scaling

|

base64

|

google-chrome-extension

We are capturing a visible tab in a Chrome browser (by using the extensions API chrome.tabs.captureVisibleTab) and receiving a snapshot in the data URI scheme (Base64 encoded string).

Is there a JavaScript library that can be used to scale down an image to a certain size?

Currently we are styling it via CSS, but have to pay performance penalties as pictures are mostly 100 times bigger than required. Additional concern is also the load on the localStorage we use to save our snapshots.

Does anyone know of a way to process this data URI scheme formatted pictures and reduce their size by scaling them down?

References:

Data URI scheme on http://en.wikipedia.org/wiki/Data_URI_scheme
Chrome Extensions API onhttp://code.google.com/chrome/extensions/tabs.html
The "Recently Closed Tabs" Chrome Extension onhttp://code.google.com/p/recently-closed-tabs

© Stack Overflow or respective owner

Related posts about JavaScript

CHAT ROOMs 7 by 6

as seen on Stack Overflow - Search for 'Stack Overflow'
I am looking for chatroom on one page with 7 loggedin users and 6+rows for say 42 users.these users will keep on adding wthnew users.Need urgent help.A PRETTY UNUSUAL Q FOR MOST OF U.What is MORE REQ new features: Usernames are unique to users currently chatting You can see a "currently chatting"… >>> More
Integrating JavaScript Unit Tests with Visual Studio

as seen on Stephen Walter - Search for 'Stephen Walter'
Modern ASP.NET web applications take full advantage of client-side JavaScript to provide better interactivity and responsiveness. If you are building an ASP.NET application in the right way, you quickly end up with lots and lots of JavaScript code. When writing server code, you should be writing… >>> More
Has Javascript developed beyond what it was originally designed to do?

as seen on Programmers - Search for 'Programmers'
I've been talking with a friend about the purpose of Javascript, when and how it should be used, etc. He quoted that: JavaScript was designed to add interactivity to HTML pages [...] JavaScript gives HTML designers a programming tool HTML authors are normally not programmers… >>> More
PHP, javascript, single quote problems with IE when passing variable from ajax post to javascript fu

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi! I have been trying to get this to work for a while, and I suspect there's an easy solution that I just can't find. My head feels like jelly and I would really appreciate any help. My main page.php makes a .post() to backend.php and fetches a list of cities which it echoes in the form of: <li… >>> More
Javascript in XSL that is loaded by Javascript

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there anyway to have javascript run when a XSL sheet has been applied to an XML file by Javascript? I am using a JQuery plugin to apply the sheet to the xml but the javascript that is located inside of the XSL file will not run. I put the Javascript at the bottom of the file and it still does… >>> More

Related posts about image-manipulation

Image Manipulation in Multitouch Development

as seen on Code Project - Search for 'Code Project'
In this article I will describe about the Image manipulation in Windows 7 multitouch Environment >>> More
[jQuery] [PHP] Image manipulation

as seen on Stack Overflow - Search for 'Stack Overflow'
hello, I want to do some kind of image editor, after I upload more images i want to make a list with all the thumbnails! after i want to be able to click on one thumb and rotate, duplicate, drag and drop (to change positions of the images), delete the image! all the images i want to be in a php… >>> More
Image manipulation

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I am just wondering what kind of computing/programming language/frameworks are needed to produce images such as the one in http://www.erdas.com/ ? Programmatically, how does one produce the general spatial analysis images ? ps: I use java most of the time. Thanks >>> More
very large image manipulation and tiling

as seen on Stack Overflow - Search for 'Stack Overflow'
I need to a software , Program(Java),or a method for tiling very larg images (more than 140MB). I have used imagemagic and convert tools photoshop and corel draw and matlab (in win os) but I have problem with memory amount.and memory is not enough.imagemagic is very slow and result is not desirable… >>> More
Codeigniter image manipulation class rotates image during resize

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using Codeigniter's image manipulation library to re-size an uploaded image to three sizes, small, normal and large. The re-sizing is working great. However, if I'm resizing a vertical image, the library is rotating the image so it's horizontal. These are the config settings I have in place: … >>> More