使用javascript而不使用serverSide代码将HTML文本转换为位图 [英] render html text to bitmap using javascript without serverSide code

问题描述

我需要使用javascript代码将文章转换为html中的文章，以最终用户的形式显示为位图，有没有办法做到这一点，没有服务器端代码？

i need to use a javascript code to convert the articles, posts in html to be viewed to the end user as a bitmap, is there any way to do it, without server side code?

例如：

<p> testing text here .... </p>

推荐答案

您可以使用 html2canvas 将页面转换为位图。

You can use for example html2canvas to convert your page to bitmap.

如果您的HTML不包含任何外部引用你也可以使用我的以下函数：

If your HTML does not contain any external references you can also use my following function:

/**
 *    Canvas extension: drawHTMLText(txt, options)
 *    By Ken Nilsen, Epistemex
 *    http://epistemex.com/
 *
 *    USAGE:
 *        myContext.drawHTMLText(txt [, options]);
 *
 *    var options = {x: startPosition,
 *                   y: startPosition,
 *                   width: maxWidth,
 *                   height: maxHeight,
 *                   callback: myFunction,
 *                   callbackError: myErrorFunction}
 *
 *    Each individual option is optional in themself. The callback
 *    on success contains an object with reference to result and
 *    originalText. Error callback is provided with the error object.
 *
 *    License: MIT
 */

CanvasRenderingContext2D.prototype.drawHTMLText = function(txt, options) {

    /// make sure we have an object if none was provided
    options = options || {};

    var ctx = this,

        /// build inline SVG
        iSVG =

        '<svg xmlns="http://www.w3.org/2000/svg" width="' +
        (options.width ? options.width : ctx.canvas.width) +

        '" height="' +
        (options.height ? options.height : ctx.canvas.height) +
        '"><foreignObject width="100%" height="100%">' +

        '<div xmlns="http://www.w3.org/1999/xhtml" style="font:' +
        ctx.font + ';color:' + ctx.fillStyle + '">' +

        txt +

        "</div></foreignObject></svg>",

        /// create Blob of inlined SVG
        svg = new Blob([iSVG],{type:"image/svg+xml;charset=utf-8"}),

        /// create URL (handle prefixed version)
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),

        /// create Image
        img = new Image;

    /// handle image loading
    img.onload = function () {

        /// draw SVG to canvas
        ctx.drawImage(img,
                      (options.x ? options.x : 0),
                      (options.y ? options.y : 0));

        domURL.revokeObjectURL(url);

        /// invoke callback if provided
        if (typeof options.callback === 'function')
            options.callback({result: img,
                              originalText: txt});
    };

    /// handle potential errors
    img.onerror = function(e) {
        if (typeof options.callbackError === 'function') {
            options.callbackError(e);
        } else {
            console.log(e);
        }
    }

    img.src = url;
}

使用

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 800;  /// size of your resulting bitmap
canvas.height = 600;

ctx.drawHTMLText(...html here...);

var dataUri = canvas.toDataURL();

dataUri 现在包含编码为data-uri（以字符串格式）。此字符串可以发送到服务器或在锚标签上与下载属性一起设置为 href ：

dataUri now contains the bitmap encoded as a data-uri (which is in string format). This string can be sent to server or set as href on an anchor tag together with a download attribute:

<a id="downloadLink">Click here to download</a>

从JS：

/// obtain dataUri here
downloadLink.href = dataUri;
downloadLink.download = 'filename.png';

重要提示：您要绘制的HTML代码不能包含任何外部引用（CSS，图像等）。 ）作为浏览器将限制SVG由于安全原因而作为图片绘制到画布上。

Important: The HTML code you want to draw must not contain any external references (CSS, images etc.) as the browser will restrict the SVG from being drawn as an image to canvas due to security reasons.

这篇关于使用javascript而不使用serverSide代码将HTML文本转换为位图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！