使用 javascript 将画布保存为图像答案

【问题标题】：Save canvas as image using javascript使用 javascript 将画布保存为图像
【发布时间】：2015-02-26 18:43:31
【问题描述】：

我正在构建一个应用程序，它将用设计覆盖手机壳并将最终图像保存到文件夹中。下面的代码有效并显示在浏览器中，但我希望能够在页面加载后立即自动保存图像。目标是使用 cron 运行此脚本，以便自动生成和保存图像。

我尝试使用 canvas.toDataURL 和 canvas2image 没有成功？我究竟做错了什么？我该如何实现它？

(function () {

  var canvas = document.getElementById('canvas');
  canvas.width = 403;
  canvas.height = 800;
  var ctx = canvas.getContext("2d");

  $.when(
    loadImage('./img/pattern.jpg'),
    loadImage('./img/iphone_mask.png'),
    loadImage('./img/iphone_overlay.png')
  ).then( function (patternImage, maskImage, overlayImage){
    ctx.save();
    ctx.drawImage(maskImage, 0, 0);
    ctx.globalCompositeOperation = "source-in";
    ctx.drawImage(patternImage, 0, 0);
    ctx.globalCompositeOperation = "destination-atop";
    ctx.restore();
    ctx.drawImage(overlayImage, 0, 0);
         
  }
  );

           

  function loadImage(url){
    var promise = $.Deferred();
    var image = new Image();
    image.src = url;
    image.onload = function(){
      promise.resolve(image);
    };
    image.onerror = promise.reject;
    return promise;
  }


})();

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body>
    <canvas id='canvas'></canvas>
    <script src="lib/jquery.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

【问题讨论】：

PS：您的内联演示缺少指向 jQuery 的链接，并且图像引用了本地图像。请添加 jQuery 参考。并将图像上传到 f.ex imgur（或在内部发布并使用这些链接）。

标签： javascript jquery html html5-canvas

【解决方案1】：

以下代码将为您提供base64编码的图像，您可以将其设置为img标签的来源，用户可以在其中保存图像，或通过AJAX将其发送到可以将图像写入的服务器端代码一个文件夹。

    //save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL();

    //Set it as the source of an img tag
    $('#img').attr('src', dataURL);

    //Send it via AJAX
    $.post('handlerUrl', { image: dataURL }, function(response) {
        //Do something
    });

您不能仅通过 JavaScript 将其保存到文件夹中。

【讨论】：

我应该把这段代码放在代码的什么地方工作？试过了，没有任何反应。
在这行之后试试，ctx.drawImage(overlayImage, 0, 0);。
感谢您的帮助，但它仍然什么也没做。
你能创建一个fiddle或plunk吗？