如何使用带有扩展名的 canvas2image 将 DIV 保存为图像

Posted 2023-05-07

【中文标题】如何使用带有扩展名的 canvas2image 将 DIV 保存为图像

【英文标题】：how to save DIV as Image with canvas2image with extension

【发布时间】：2014-10-07 12:30:29

【问题描述】：

我已经使用以下代码完成了以下代码，将 html 内容（DIV）转换为图像（JPEG、PNG、GIF 等）。

<pre>   
html2canvas($(".mainbox"), 
    onrendered: function(canvas) 
       theCanvas = canvas;
       document.body.appendChild(canvas);
       Canvas2Image.saveAsImage(canvas); 
       $("#FinalImage").append(canvas);
    
);
</pre>  

我的页面中还包含 html2canvas.js、base64.js 和 canvas2image.js。最后图像显示在#FinalImage DIV 中，浏览器要求我将其保存在我的驱动器中，到目前为止一切正常。

现在的问题是保存图像的名称没有扩展名，每次我需要转到图像并分配扩展名（“.jpg”，“.png”等...）。当用户从浏览器保存时，是否有任何解决方案可以默认设置扩展名。

提前致谢。

【参考方案1】：

我已经完成了相同的功能来捕获签名。这与您的方法不同。但是这段代码 sn-p 可能会对您有所帮助。如果您需要完整的源代码，请评论。

var canvas = document.getElementById(<canvas element id>)// get canvas element
var dataURL = canvas.toDataURL("image/png");// convert to img, specify extension
document.getElementById(<new image id>).src = dataURL; // write as an image

在第二行我指定了png.那里你可以改变图像的扩展名。希望对你有帮助

【讨论】：

感谢您的帮助。仍然面临同样的问题。内容正在正确转换为图像。它显示在浏览器页面中。 “Canvas2image.js”使用“saveFile”功能，我认为有一些问题。在 Firefox 中出现问题，在 Chrome 中它可以正常工作。

在你的代码中你需要使用saveAsPNG(canvas)而不是使用saveAsImage(canvas)这将工作