Question

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

我刚刚将项目上传到了https://standing-slipper.glitch.me/

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

<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元素。现在，您可以使用该元素来做所有事情：下载，附加，应用到另一个画布。...

如何将画布下载为png？

1 个答案: