Question

是否可以在javascript（无需连接服务器）图像中创建，创建后可以放在网站上？例如，我只从服务器发送公式，客户端根据它创建图像，我可以将其用作jpg / png / bmp背景（并重复等）。

Answer 1

是。 HTML5中有一个canvas元素。它可以用于2D图像和3d动画等。

Here是一套关于它的教程。

你的意思是这样的：


var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var centerX = 70;
    var centerY = 70;
    var radius = 70;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();

var img = canvas.toDataURL("image/png");
/*
   returns "data:image/png;base64,iVBORw0KGg...."
   it can be used wherever you want:
    -images 
    -style 
    -etc
*/
var b = document.getElementById("foo");
b.style.backgroundImage = "url(" + img + ")";

Demo和with text

Answer 2

如果您想要跨浏览器解决方案，请查看Raphael。

Answer 3

我喜欢Bakudan的解决方案，但不要忘记原始数据src：

Embedding an image via data

Javascript程序图像

3 个答案: