Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. JavaScript
  4. Converting image file format

Converting image file format

Scheduled Pinned Locked Moved JavaScript
javascripthtmltestingbeta-testinghelp
1 Posts 1 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    Valentinor
    wrote on last edited by
    #1

    I am trying to make an add-on for Mozilla Firefox that will convert an image (from a given direct link) to another format and then give the user the save file pop-up. I have tried to use JavaScript to turn the image into a canvas, and then the canvas to an image with the format wanted, but I run into the problem with canvas.toDataURL, that doesn't allow to use an image from another origin, and I get Uncaught DOMException: The operation is insecure. How else can I do this image conversion? I know it is possible to do it, because there are other add-ons that do this, but my add-on will have other specific functions for our work beside only image conversion, and we can't use those because of that. I'm doing the testing in straight HTML, because it is easier to do it this way, then keep refreshing the add-on in browser. Here is the code:

    window.onload = function() {
    var image = new Image();
    image.addEventListener("load", imageLoaded, false);
    image.src = "theLinkToAnImage";
    };

    function imageLoaded() {
    var canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
    canvas.getContext("2d").drawImage(this, 0, 0);

    var image = new Image();
    image.crossOrigin = "Anonymous";
    image.src = canvas.toDataURL("image/jpg");
    document.body.appendChild(image);
    

    }

    1 Reply Last reply
    0
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • World
    • Users
    • Groups