Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts

    content editable - pasting image

    Mybe bad forum, should be in javascript ...


    Since image can be directly pasted into content editable div, how can I check dimesions & KB size of forinstance this ?
    This is from FF.

    Code:
    <img alt="" src="data:image/png;base64,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" _moz_resizing="true">
    EDIT: --> http://jsfiddle.net/minitech/2KTjE/

    And , is it possible to listen for paste image event ?
    Last edited by BubikolRamios; 07-19-2013 at 05:43 AM.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    One answer
    And , is it possible to listen for paste image event ?
    listen for key down event ctrlKey is 17 and V is 86 in keycode talk.
    Evolution - The non-random survival of random variants.

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Subquestion:

    If I have big image pasted into editable div and its data like: "data:image/png;base64,iVBORw0KGgoAAAANSU......"

    Saj that is 2000 x 2000 px

    How to compress/resize "data:image/png;base64,iVBORw0KGgoAAAANSU......"
    to 100 x 100 px ? Any javascript code outthere ?

    Sure you can resize pasted image in editable div or set its (img tag) width & height, but png data remains the same. Unnnecesary to big.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Of course you can BR. It's the heart of responsive design. To keep the aspect ratio just resize on one element and use auto for the other.
    document.images[0].style.width = "auto";
    document.images[0].style.height = "100px";
    or don't mention the other at all.
    use images[0] or how ever you identify the image.

    You need to try this out cause I'm still a little sleepy and haven't.
    Evolution - The non-random survival of random variants.

  • #5
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts
    point beeing:

    1.the original image, say 2000 x2000 px, the data are:
    "data:image/png;base64,iVBORw0KGgoAAAANSU......SU"
    That is the data string length is 5000 characters (invented that number out of head)

    2.the resized <img has exact same data with exact same character length (say 5000 char)
    Tested that. Only adding width & height to img tag does not touch data at all.

    3. I ment, is it possible to change = downsize image data upon downsize of dimensions of image ?

    There is I think (didnt test it jet) something for java (http://www.mysamplecode.com/2011/07/...string-to.html). Could use that on server to downsize data before save to db.

    But looking for javascript.
    Last edited by BubikolRamios; 08-29-2013 at 04:42 PM.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •