（已关闭）如何将画布下载为 png？

Question

我尝试做的 HTML 页面是将图像上传到画布，在该图像上放置水印，然后将带有水印的图像下载为一个 png 文件。目前的问题是我可以将图像上传到画布并添加水印，但我无法下载画布。

我已经在互联网上尝试了一些解决方案，包括 stackoverflow。 Fidesaver.js 不适用于此。所以这里是代码：（代码中的水印只是我在谷歌找到的随机 240x240 图像）

Glitch.com上的项目页面好像已经不行了，所以我把代码放到了代码sn-p中：

Upper image:<br>
<img src="https://micolsalomone.com/wp-content/uploads/2018/04/preloader-logo-240x240.png" width="150px" alt="Example image" id="wm" >
<input type="file" id="imageLoader" name="imageLoader"/><br>
<canvas id="imageCanvas"></canvas>
<script type="text/javascript">
var wm=document.getElementById("wm");
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){ 
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.crossOrigin = '';
        img.onload = function(){
            canvas.width = 240;
            canvas.height = 240;
            ctx.drawImage(img,0,0,240,240);
            ctx.drawImage(wm,0,0,240,240);
            
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]); 
}
</script>

Answer 1

您可以尝试这样做：

var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){ 
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.crossOrigin = '*';
        img.onload = function(){
            canvas.width = 240;
            canvas.height = 240;
            ctx.drawImage(img,0,0,240,240);
            
            
            var wm = new Image();
            
            wm.crossOrigin = '*';
            
            wm.onload = function () {
              ctx.drawImage(this,0,0,240,240);
              
              var base64 = canvas.toDataURL("image/png")
            
              var fileToSave = new Image();
            
              fileToSave.onload = function () {
                document.getElementById('img_div').appendChild(this);
              };
            
              fileToSave.src = base64;
            };
            
            wm.src = 'https://i.imgur.com/YGxjLZw.png';
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]); 
}

<img src="https://micolsalomone.com/wp-content/uploads/2018/04/preloader-logo-240x240.png" width="150px" alt="Example image" id="wm" >
<input type="file" id="imageLoader" name="imageLoader"/><br>
<div>
  Canvas
  <canvas id="imageCanvas"></canvas>
</div>
<div id="img_div">
  Image png:
</div>

注意：由于Access-Control-Allow-Origin 原因，我已将您的水印图像更改为另一张图像。但是你仍然可以在你的本地主机上使用它。

在画布上应用水印后，需要将画布转换成图片为base64字符串。

然后，您可以将字符串解析为Image 元素。现在您可以使用该元素执行所有操作：下载、附加、应用到另一个画布......