将文字放在图片上并另存为图片 [英] Put text on an image and save as image
问题描述
我有一个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;
};
这很好。有我的形象和文本。
但它仍然是一个画布，没有图像。
任何人都可以帮助我吗？
沙盒
当浏览器处理将内容保存到用户的硬盘时，它是沙箱。这是为了安全（你不想要一个坏的黑客（或间谍）覆盖系统文件或植入病毒或后门等）。因此，防止直接访问，并隔离本地存储。
您总是需要通过批准操作的用户交互桥接内容，因此浏览器将请求您通过弹出对话框以使用户意识到浏览器尝试传送要保存的内容来选择文件的位置（见下面的演示）。
调用保存对话框
以下是启用下载功能的其他几种方法。
image is ok then you can do：
///创建一个锚点/链接（或使用现有的）
var lnk = document.createElement（'a'）;
///将你的图像设置为data-uri链接
lnk.href = canvas.toDataURL（）;
///和键，当用户点击图像将被下载
lnk.download ='filename.png';
///添加lnk到DOM，在这之后的canvas
canvas.parentElement.appendChild（lnk）;
下载属性是一个新的HTML5功能。
您也可以自动完成整个点击功能，而不是导航到此位置，浏览器会显示一个保存对话框，并让用户将其内容保存到磁盘。
请参阅 线上演示 ：
功能下载（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为此）。
本地存储
另一种选择是将文件存储在浏览器的本地存储中。您有网络存储，但是这是非常有限的（通常在2.5 - 5 mb之间），考虑到每个字符存储需要两个字节，实际存储只是其中的一半（它只能存储字符串，如data-uri和data-uris比原始文件大约33％）。但是如果你保存小图标，sprites等，这可能会做。
此外，你可以使用索引数据库（以及现在已解除的 Web SQL ），可以存储较大的数据，您也可以请求用户存储x mb的dat。
与文件API （目前仅在Chrome中实现）。这更像是一个文件系统，用于存储大型文件。
这些可能看起来更复杂，如果你不熟悉他们，但我提到他们作为可能的选择因为这些还节省了与服务器通信的带宽，并将负担移动到客户端而不是服务器。
I have one problem with HTML5 Canvas. I have one image. On this image I want to put text and display/save this as an image.
I have this code:
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";
};
This works fine. There is my image and the text on it. But it is still a canvas and no image. Can anybody help me?
Sand boxing
Browsers are sand-boxed when it deals with saving content to user's hard disk. This is for security (you don't want a bad hacker (or spy) to overwrite system files or plant a virus or a backdoor etc.). So direct access is prevented and local storage is isolated.
You always need to "bridge" the content by an user interaction that approves the operation and therefor the browser will request you to choose a location for the file by popping up a dialog to make the user aware of that the browser tries to deliver content to be saved (see demo below).
Invoking save dialogs
Here are a couple of other possibilities to enable download.
If a link for example under the image is ok then you can do:
/// 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);
The download attribute is a new HTML5 feature. Instead of "navigating" to this location the browser will show a save dialog instead and let the user save its content to disk.
You can also automate the whole clicking feature by generating an event for it.
For example:
See ONLINE DEMO HERE:
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");
}
}
Saving to server
You can always go by the step of saving the file to a server. However, you will also have to go through the save dialog step when retrieving the file from server (the dialog).
If you want to store the file only to be shown in the browser this is perfect.
There are various ways to do this (there are many solutions on SO for this).
Local storage
And a different option is to store the file in the browser's local storage. You have Web Storage, however this is very limited (typically between 2.5 - 5 mb) and considering that each char stored takes two bytes the actual storage is just half of that (it can only store strings such as the data-uri and data-uris is about 33% larger than the original file). But if you save small icons, sprites etc. this might do.
In addition you can use Indexed DB (and the now deprectaed Web SQL) which can store larger data and you can also request user's permission to store x mb of dat.
The same goes with File API (which is currently only implemented in Chrome). This acts more like a file system and is intended to store huge files.
These might seem more complex if you are not familiar with them, but I mention them as possible options as these also saves you bandwidth communicating with a server and you move the "burden" to the client instead of the server.
这篇关于将文字放在图片上并另存为图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
