将画布保存为 png答案

【问题标题】：Saving canvas as a png将画布保存为 png
【发布时间】：2014-01-30 19:39:25
【问题描述】：

您好，我一直在尝试将我的画布保存为 png，并在编译后立即将其生成到网页中。我遇到的问题是，当图像被保存和输出时，它只显示我从文本框中加载的文本。我还加载了显示在画布中但不在输出图像中的背景图像。

<form>
<input name="name" id="name" type="text"/>
</form>
<canvas id="myCanvas" width="640" height="480"></canvas>
<input name="" type="button" onclick="save()" /> Generate

<div id="sample">
</div>
<script type="text/javascript" src="canvas.js"></script>

java脚本

    var myCanvasElement=document.getElementById("myCanvas");
    var drawingContext=myCanvasElement.getContext("2d");

    // clear canvas and div
    drawingContext.clearRect ( 0 , 0 , 640 , 480 );
    document.getElementById("sample").innerHTML = "";

     // add text box text to canvas
     var amount1 = document.getElementById("name").value;
     drawingContext.font = "bold 12px sans-serif"; 
     drawingContext.fillText(amount1, 30, 43); 
     drawingContext.fillText(amount1, 30, 43); 

     //loads in image to canvas

     var imageObj = new Image();
     imageObj.onload = function() {
     drawingContext.drawImage(imageObj, 100, 150);
     };
     imageObj.src ='132.png';

     //converts canvas to image 
     var canvas = document.getElementById('myCanvas'),
     dataUrl = canvas.toDataURL(),
     imageFoo = document.createElement('img');
     imageFoo.src = dataUrl;

     //Style your image here
     imageFoo.style.width = '640px';
     imageFoo.style.height = '480px';

     //After you are done styling it, append it to the BODY element
     var theDiv = document.getElementById("sample");
     theDiv.appendChild(imageFoo);  
 }

我想知道是否有人对它为什么会这样做有任何建议提前谢谢你

【问题讨论】：

进一步了解 SeeTheC 所说的 - 如果您只是从计算机“运行”文件，这将不起作用。您需要通过 Localhost 访问它。如果不这样做，将收到“画布被跨域数据污染”类型的消息。
添加到 enhzflep 后，在 Chrome、IE 和 Safari 中将无法使用。但仅出于测试目的，您可以运行它 firefox 。

标签： javascript html canvas

【解决方案1】：

给时间加载图像。加载后将其转换为 DataUrl。

试试这个：

  // your code
  var imageObj = new Image();
     imageObj.onload = function() {
        drawingContext.drawImage(imageObj, 100, 150);
         setTimeout(loadImage,200)    ;
     };

 imageObj.src ='132.png';

图片加载后调用：

function loadImage()
{
     //converts canvas to image 
     var canvas = document.getElementById('myCanvas'),
     dataUrl = canvas.toDataURL(),
     imageFoo = document.createElement('img');
     imageFoo.src = dataUrl;

     //Style your image here
     imageFoo.style.width = '640px';
     imageFoo.style.height = '480px';

     //After you are done styling it, append it to the BODY element
     var theDiv = document.getElementById("sample");
     theDiv.appendChild(imageFoo);  
}

【讨论】：

谢谢你是正确的让它加载解决了问题。