transform and download a image from URL using JavaScript

Question

I'm having a huge problem. I'm trying to download a scaled and rendered image using these CSS properties:

 transform: scale(2);
image-rendering: pixelated;

Which will result to this:

<img style="margin:15px 15px; transform: scale(2); image-rendering:pixelated;" src="https://images.habbo.com/c_images/album1584/FAS03.png">

As you would know if I tried to save the image it wouldn't save with the applied CSS properties and saves as the original dimensions. Is there any way I can apply these properties and then download the image like it is displayed above using the CSS properties?

I'm basically trying to scale the image without losing quality and download it scaled. I can't just save the image and resize it because it will become very blurry.

I tried using html2canvas but failed here is the link to the codepen: https://codepen.io/Ownslo/pen/XWdgByY

^ but I'm pretty sure using that would just scale the image and not render it making it blurry. (but for some odd reason it doesn't even download the image correctly and downloads a all white image.)

Hopefully someone can help me out. Thank you.

Looking at the transform property, scale function actually takes two arguments not one. Try transform: scale(2,2)? I'm not sure about how well that handles the blurriness but that's not easy to avoid without using SVG. — Batman
– Batman, Commented Aug 30, 2020 at 7:30

A. Mort · Accepted Answer · 2020-08-30 06:58:04Z

2

Try loading your image into a Canvas and doing all your image modifications on the 2d context. I made you an example here:

https://jsfiddle.net/mortac8/mhds8wn6/1/

<canvas id="mycanvas" height=100 width=100></canvas>

<script>
  let download = function(){
    let link = document.createElement('a');
    link.download = 'anAnswer.png';
    link.href = document.getElementById('mycanvas').toDataURL();
    link.click();
  }

  let img = new Image();
  img.src = "https://images.habbo.com/c_images/album1584/FAS03.png";
  img.setAttribute("crossorigin", "anonymous");
  img.addEventListener("load", function() {
    let canvas = document.getElementById("mycanvas");
    let ctx = canvas.getContext("2d");
    ctx.scale(2,2);
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(img, 0, 0);
    download();
  });
</script>

edited Aug 30, 2020 at 6:58

answered Aug 30, 2020 at 6:48

A. Mort

3184 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

transform and download a image from URL using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related