Question

我正在尝试从dataURI在画布中渲染html，这在我复制dataURI并将其粘贴到img标记中时起作用，如下所示：

<img src="data:image/svg+xml; charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22300%22%20style%3D%22display%3A%20block%3B%22%3E%3CforeignObject%20width%3D%22600%22%20height%3D%22300%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22font-size%3A40px%3B%20background-color%3A%20%23ffffff%3B%20display%3A%20block%3B%22%20width%3D%22600%22%20height%3D%22300%22%3E%3Cdiv%20style%3D%22width%3A%20300px%3B%20height%3A%20600px%3B%20background-color%3A%20%23ffffff%3B%20display%3A%20block%3B%22%3Ehekk%3C%2Fdiv%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E" alt="" />

但是，当我尝试在画布的上下文中执行此操作时，它只显示一个空白图像。

这是我的功能：

function generateImage(width, height, image, css, html, callback) {
    var canvas = new Canvas(width, height);
    var context = canvas.getContext('2d');
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" style="display: block;">' +
               '<foreignObject width="600" height="300">' +
               '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; background-color: #ffffff; display: block;" width="600" height="300">' +
                 '<div style="width: 300px; height: 600px; background-color: #ffffff; display: block;">hekk</div>' +
               '</div>' +
               '</foreignObject>' +
               '</svg>';
    var img = new Canvas.Image();
    var url = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(data);
    img.onload = function() {
      context.drawImage(img, 0, 0);
    };
    img.src = url;
    console.log(url)
    callback(canvas);
}

由于我花了很多时间在互联网上搜索并找不到有效的解决方案，因此我们将非常感谢任何帮助。

这是整个代码，减去敏感信息：

var express = require("express");
var mongoose = require("mongoose");
var bodyParser = require("body-parser");
var Canvas = require("canvas");
var fs = require('fs');


var app = express();
var router = express.Router();



var port = process.env.API_PORT || 3002;


app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(function(req, res, next) {
 res.setHeader("Access-Control-Allow-Origin", "*");
 res.setHeader("Access-Control-Allow-Credentials", "true");
 res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT,DELETE");
 res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");


 res.setHeader("Cache-Control", "no-cache");
 next();
});


router.get("/", function(req, res) {
 res.json({ message: "This Page does not show any content!"});
});

function generateImage(width, height, image, css, html, callback) {
    var canvas = new Canvas(width, height);
    var context = canvas.getContext('2d');
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" style="display: block;">' +
               '<foreignObject width="600" height="300">' +
               '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; background-color: #ffffff; display: block;" width="600" height="300">' +
                 '<div style="width: 300px; height: 600px; background-color: #ffffff; display: block;">hekk</div>' +
               '</div>' +
               '</foreignObject>' +
               '</svg>';
    var img = new Canvas.Image();
    var url = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(data);
    img.onload = function() {
      context.drawImage(img, 0, 0);
    };
    img.src = url;
    console.log(url)
    callback(canvas);
}




//test
router.get("/test.png", function(req, res) {
  generateImage(600, 300, null, null, null, function(canvas) {
canvas.pngStream().pipe(res);
  });
});


app.use("/", router);

app.listen(port, function() {
 console.log(`Image server running on port ${port}`);
});

节点画布不从dataURI渲染图像

0 个答案: