javascript - 将 Canvas 转换为图像然后下载

Question

我正在尝试将网站的一部分转换为可下载的图片。

首先，我使用以下方法将 html 转换为 Canvas :

$(function() { 
$("#download").click(function() { 
    html2canvas($("#the-grid"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            $("#saved").append(canvas);
            $("#saved canvas").attr('id', 'scan');          
        }           
    });

生成 Canvas 效果很好，一切看起来都很好。

然后我想把它变成一张图像，我可以稍后将其用于缩略图，但也开始下载图像。

为此，我完成了这样的功能。

$(function() { 
$("#download").click(function() { 
    html2canvas($("#the-grid"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            $("#saved").append(canvas);
            $("#saved canvas").attr('id', 'scan');
            var c=document.getElementById("scan");
            var d=c.toDataURL("image/png");
            var w=window.open('about:blank','Download Mix');
            w.document.write("<img src='"+d+"' alt='Custom Blend'/>");
        }

    });

但它不起作用。

我得到的错误是完全不相关的。

我是一名经验丰富的开发人员，但我对 Jquery 还很陌生，因此我们将不胜感激。

---

更新

开始工作了。

像这样创建图像

$(function () {
    $("#download").click(function () {
        html2canvas($("#the-grid"), {
            onrendered: function (canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);
                $("#saved").append(canvas);
                $("#saved canvas").attr('id', 'scan');
                var image = canvas.toDataURL("image/png");
                $("#saved").append("<img src='"+image+"' alt='Custom Blend'/>");
            }

        });

图像 html 最终看起来像

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Custom Blend">

Answer 1

也许这可以帮到你:

var image = canvas.toDataURL("image/png"); // build url of the image
window.location.href=image; //activate download
image = "<img src='"+image+"'/>"; // set canvas image as source