沙拳

Question

HTML5 Canvas存在一个问题。我有一张图片。在这张图片上，我想放置文字并将其显示/保存为图像。

我有这段代码：

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);
 };
 imageObj.src = "mail-image.jpg"; 
};

这很好用。我的图像和文字都在上面。但它仍然是画布而没有图像。有人能帮助我吗？

Answer 1

出于安全考虑，没有方便的方法将画布图保存到用户的本地驱动器。

作为解决方法，请转到“旧学校”：将画布转换为图像并在新窗口中显示。

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);

     // open the image in a new browser tab
     // the user can right-click and save that image
     var win=window.open();
     win.document.write("<img src='"+canvas.toDataURL()+"'/>");    

 };
 imageObj.src = "mail-image.jpg"; 
};

Answer 2

沙拳

当浏览器处理将内容保存到用户的硬盘时，它们是沙盒子。这是为了安全（您不希望坏黑客（或间谍）覆盖系统文件或植入病毒或后门等）。因此，可以防止直接访问，并隔离本地存储。

你总是需要＆＃34;桥接＆＃34;通过批准操作的用户交互的内容，因此浏览器将通过弹出一个对话框让用户知道浏览器尝试传送要保存的内容来请求您选择文件的位置（参见下面的演示）

调用保存对话框

以下是启用下载的其他几种方法。

如果图像下的链接正常，则可以执行以下操作：

/// create an anchor/link (or use an existing)
var lnk = document.createElement('a');

/// set your image as data-uri link
lnk.href = canvas.toDataURL();

/// and the key, when user click image will be downloaded
lnk.download = 'filename.png';

/// add lnk to DOM, here after the canvas
canvas.parentElement.appendChild(lnk);

下载属性是一种新的HTML5功能。而不是＆＃34;导航＆＃34;在此位置，浏览器将显示一个保存对话框，让用户将其内容保存到磁盘。

您还可以通过为其生成事件来自动执行整个点击功能。

例如：

function download(canvas, filename) {

    if (typeof filename !== 'string' || filename.trim().length === 0)
        filename = 'Untitled';

    var lnk = document.createElement('a'),
        e;

    lnk.download = filename;        
    lnk.href = canvas.toDataURL();  

    if (document.createEvent) {

        e = document.createEvent("MouseEvents");
        e.initMouseEvent('click', true, true, window,
                         0, 0, 0, 0, 0, false, false,
                         false, false, 0, null);

        /// send event            
        lnk.dispatchEvent(e);

    } else if (lnk.fireEvent) {

        lnk.fireEvent("onclick");
    }
}

保存到服务器

您始终可以执行将文件保存到服务器的步骤。但是，从服务器（对话框）检索文件时，您还必须执行保存对话框步骤。

如果您只想将文件存储在浏览器中，这是完美的。

有多种方法可以做到这一点（SO上有很多解决方案）。

本地存储

另一种选择是将文件存储在浏览器的本地存储中。你有Web Storage，但这是非常有限的（通常介于2.5 - 5 mb之间）并且考虑到每个存储的char占用两个字节，实际存储只是其中的一半（它只能存储字符串，例如data-uri）和data-uris比原始文件大约33％）。但是，如果您保存小图标，精灵等，这可能会。

此外，您可以使用可存储更大数据的Indexed DB（以及现在已删除的Web SQL），您也可以请求用户存储x mb的数据。

File API（目前仅在Chrome中实施）也是如此。这更像是一个文件系统，用于存储大量文件。

如果您对它们不熟悉，这些可能看起来会更复杂，但我将它们视为可能的选项，因为这些也可以节省与服务器通信的带宽，并且可以减轻＆＃34;负担。到客户端而不是服务器。

将文字放在图像上并另存为图像

2 个答案:

沙拳

调用保存对话框

保存到服务器

本地存储