Question

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

首先，我使用：

将html转换为画布

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

画布生成效果很好，所有看起来都很好。

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

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

$(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

Answer 2

以下是我这样做的方法（注意，没有办法在Safari中下载文件并在不ping服务器的情况下设置文件名）：

首先，您需要将画布作为png：var img = canvas.toDataUrl('image/png');

然后，您将要将该dataURL转换为blob。有关这方面的好方法，请参阅this函数。

现在你要下载那个blob。这适用于所有浏览器，但Safari：

if (window.navigator.msSaveBlob) {
  window.navigator.msSaveBlob(blob, 'image.png');
} else {
  var url = window.URL || window.webkitURL;
  var objectURL = url.createObjectURL(blob);
  var ele = $('<a target="_blank"></a>')
              .hide()
              .attr('download', 'image.png')
              .attr('href', objectURL);
  $('body').append(ele);
  var clickEvent = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': false,
  });
  ele[0].dispatchEvent(clickEvent);
  window.setTimeout(function() {
    url.revokeObjectURL(objectURL);
    ele.remove();
  }, 1000);
}

这会创建一个不可见的链接并模拟对其的点击。 click()功能在Firefox中不起作用，因此您必须手动创建事件并进行调度。最后，它通过在一秒钟后删除不可见的链接进行一些清理。在IE中，它使用Microsoft提供的方法。这将下载文件名为“image.png”的图像。如果您需要能够对代码执行更多操作，它还具有能够下载任何blob的优点。希望这有帮助！

将画布转换为图像然后下载

2 个答案: