使用没有服务器端代码的 javascript 将 html 文本渲染为位图

render html text to bitmap using javascript without serverSide code(使用没有服务器端代码的 javascript 将 html 文本渲染为位图)

问题描述

我需要使用 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 将 html 文本渲染为位图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！