使用 JavaScript 从 URL 转换和下载图像

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.

Answer 1

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>