如何保存带有两个图像的画布

how to save canvas with two image

本文关键字：图像 两个 何保存 保存      更新时间：2023-09-26

>我有一个画布，其中一张图像作为背景显示，另一张图像放置在该图像的中心。 现在我想保存完整的画布。我最近的代码没有保存它。

您可以在此处查看演示 [ http://jsfiddle.net/himani/gqc9b0qd/3/]

var can = document.getElementsByTagName('canvas')[0];
  var ctx = can.getContext('2d');
  ctx.strokeStyle = '#f00';
  ctx.lineWidth   = 6;
  ctx.lineJoin    = 'round';
  ctx.strokeRect(40,100,150,100);
     var angleInDegrees=0;
  var img = document.getElementsByTagName('img')[0];
img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg";
  ctx.drawImage(img,40,100,150,100);
 function drawRotated(degrees){
        ctx.clearRect(0,0,300,300);
        ctx.save();
        ctx.translate(40+150/2,100+100/2);
        ctx.rotate(degrees*Math.PI/180);
  ctx.strokeRect(-150/2,-100/2,150,100);
        ctx.drawImage(img,-150/2,-100/2,150,100);
        ctx.restore();
    }
 $("#clockwise").click(function(){ 
        angleInDegrees+=30;
        drawRotated(angleInDegrees);
    });
$("#save").click(function(){ 
                var ua = window.navigator.userAgent;
                if (ua.indexOf("Chrome") > 0) {
                    // save image without file type
          var canvas = document.getElementsByTagName('canvas')[0];
                    document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    // save image as png
                    var link = document.createElement('a');
                    link.download = "test1.png";
                    link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;
                    link.click();
                }
                else {
                    alert("Please use Chrome");
                }

    });
如果要

使用 toDataUrl 从跨源请求导出图像，请尝试在图像上定义 crossOrigin 属性。

    var img = document.getElementsByTagName('img')[0];    
    img.crossOrigin = "anonymous";
    img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg";
    img.onload = function () {
        ctx.drawImage(img,40,100,150,100);
    };

它对我来说效果很好。有关此属性和可用值的更多信息，请查看 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes

相关文章：