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

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

沙拳

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

您总是需要通过批准操作的用户交互来"桥接"内容,因此浏览器将通过弹出一个对话框让用户知道浏览器尝试将内容传递给用户来请求您选择文件的位置.保存(见下面的演示).

调用保存对话框

以下是启用下载的其他几种可能性.

如果图像下的链接正常,那么你可以这样做:

/// 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);

download属性是一个新的HTML5功能.浏览器将显示一个保存对话框而不是"导航"到此位置,而是让用户将其内容保存到磁盘.

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

例如:

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存储,但这是非常有限的(通常介于2.5 - 5 mb之间)并且考虑到存储的每个char占用两个字节,实际存储只是其中的一半(它只能存储字符串,如data-uri和data- uris比原始文件大约33%).但是,如果您保存小图标,精灵等,这可能会.

此外,您可以使用可以存储更大数据的索引数据库(以及现在已删除的Web SQL),还可以请求用户许可存储x mb的数据.

这同样与文件API(这是目前仅适用于Chrome实现).这更像是一个文件系统,用于存储大文件.

如果您不熟悉它们,这些可能看起来会更复杂,但我将它们作为可能的选项提及,因为这些也可以节省与服务器通信的带宽,并将"负担"转移到客户端而不是服务器.