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

我有个大问题。我正在尝试使用以下CSS属性下载缩放和渲染的图像：

transform:scale（2）；
图像渲染：像素化尝试将图像加载到画布中，并在2d上下文中执行所有图像修改。我在这里给你举了个例子：



让下载=函数（）{
让link=document.createElement（'a'）；
link.download='anAnswer.png'；
link.href=document.getElementById（'mycanvas'）.toDataURL（）；
link.click（）；
}
设img=新图像（）；
img.src=”https://images.habbo.com/c_images/album1584/FAS03.png";
img.setAttribute（“交叉源”、“匿名”）；
img.addEventListener（“加载”，函数（）{
让canvas=document.getElementById（“mycanvas”）；
设ctx=canvas.getContext（“2d”）；
比例尺（2,2）；
ctx.imageSmoothingEnabled=假；
ctx.drawImage（img，0,0）；
下载（）；
});
查看transform属性，scale函数实际上接受两个参数，而不是一个。尝试变换：缩放（2,2）

？我不确定这对模糊的处理有多好，但如果不使用SVG，这是不容易避免的。

<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>