In my question add form, I have an editable div, instead of a textbox.
[because I need to add the formula & copy the past image needed]
<div contenteditable="true" onchange="saveData()" placeholder="Question"></div>
when users copy & past images in editable div, it dynamically converts the image into base64 and put it in the IMG stage
<img src="data:image/png;base64,iVBORw0KGgoAAA....etc"/>
But my issue was if the user copied & past some big image base64 code was a huge line.
Its impact some other place of my application.
So any solution reduced size or any other options.
Related
Basically, I'm working on a freelance project right now where an image is uploaded on a website and is clipped on a path that is already defined. I'll give you an example:
As you can see, I placed the img tag just underneath a div tag
<div style="clip-path: xxx">
<img src="xxxxx.xxx">
</div>
Now, I used the JQuery UI Draggable widget to move the image around. Got that covered, no problems there.
The problem is, how do I capture and save that image? I tried using Html2Canvas to 'screenshot' it but it kept resulting in a square instead of a heart image.
I am working on an amazon page and have come into a dilemma. I am using the easyazon wordpress plugin for amazon associate linking. I'v been working my way through the plugin and have managed to change a few things to my liking. One of my dilemmas is the image size that it generates from amazon.
For the img tag in the html, this is what the plugin produces.
https://images-na.ssl-images-amazon.com/images/I/51%2BMJ2MawrL._SL160_.jpg
With amazon image, if you change the SL160 to a different number, it changes to width of the image.
For example. This >
https://images-na.ssl-images-amazon.com/images/I/51%2BMJ2MawrL._SL160_.jpg
Will pull in the image at 160 pixel width.
https://images-na.ssl-images-amazon.com/images/I/51%2BMJ2MawrL._SL300_.jpg
Will pull in the image at 300px width.
What I need to do is to be able to somehow when the page is generating / generated, change the text "SL160" to "SL300" on all linked images on the page. (A different number of my choice) so a larger image is shown on the page.
What would be the best way to handle this? And most efficient? Im drawing a blank as in how I could handle this.
I've looked in the plugin and there is no where to change any setting to pull in a larger amazon image. The only way I see to do this would be to have either php or jaavscript change all SL160 text strings on the page so SL300 before the page renders. I'm guessing that if it's done after the page renders, that would be horribly slow. I'm Lost.
<div class="easyazon-block-image-container">
<?php printf('<a %s><img %s /></a>', easyazon_collapse_attributes($link_atts), easyazon_collapse_attributes($image_atts)); ?>
</div>
Produces >
<img alt="xxx" class="xxx" src="https://images-na.ssl-images-amazon.com/images/I/51%2BMJ2MawrL._SL160_.jpg">
I am using a textarea to emulate a piece of 9.5x11 Letter sized US paper.
I have a textarea that is appropriately scaled to the 9.5x11 size; however, I want to prevent users from being able to add more text that would overflow the textarea.
The goal is to limit the user to the boundaries of the textarea, and thus preserve the ability to scale the content to Letter sized paper.
I've tried using resize:none, and each option for overflow, but these mainly seem to deal with the pixel size of the textarea, and not the content inside it. How can I use Javascript, CSS, or HTML to keep the user within the boundaries of the textarea?
What would be the simplest way to show a picture, but also allow the user a choice of preset buttons to display the picture at alternative sizes? (note, source photo still shown, just redrawn on the fly at different sizes)
I thought perhaps either if its possibly to dynamically set the size of a table cell with photo contained within, or perhaps a better Javascript alternative?
Answers / examples:
http://home.comcast.net/~urbanjost/resize/resize.html
Change image size with JavaScript
http://ibnelson.com/jQuery/ch03/width2.html
Problem solved :)
I have an image with 5 logo's and I'd like each logo to change individually from greyscale to color on hover. The obvious solution is to chop the image into the separate logo's with each having both a greyscale and color version and then do a standard css rollover.
However, I can't increase the page load with 5 additional image hits. Is it possible to do this using jquery and one large sprite with all 5 logo's in both greyscale and color and somehow detect which area of the image is being hovered over so the associated color version can then be shown?
You don't want to fiddle with cursor location if you can avoid it. Actually, what you probably want to do is create a CSS sprite - it's one image file that contains all 10 logos (5 color, 5 greyscale). That way, the browser only has to load one image. Then, using CSS, you display pieaces of that image as the background image for your various elements, and vary which piece is displayed using the :hover pseudoclass.
This page will get you started:
http://www.w3schools.com/css/css_image_sprites.asp
And I like to use this page to create sprites and the CSS that goes with it.
http://spritegen.website-performance.org/
Note that this is a somewhat difficult technique to get working the first time, but it saves lots of time and bandwidth in the long run.