js(网页，代码，canvas）转图片

短命女 2022-06-07 00:09 426阅读 0赞

一般来说html代码不能直接转换成图片，需要先转换成canvas在由canvas转换成图片。

本文将介绍以下几种情况：

1.图片转换成canvas

2. canvas转换成图片

3. Html代码转换成canvas

4. HTML代码转换成图片

1.图片转换成canvas

function convertImageToCanvas(image) \{

var canvas = document.createElement("canvas");

canvas.width = image.width;

canvas.height = image.height;

canvas.getContext("2d").drawImage(image, 0, 0);

return canvas;

\}

2.canvas转换成图片

注明：需要运行在服务器

function convertCanvasToImage(canvas) \{

var image = new Image();

image.crossOrigin = '\*’; //用以解决跨域问题

image.src = canvas.toDataURL("image/png");

return image;

\}

3.Html代码转换成canvas

需要借助一个三方工具html2canvas.js

view代表想要渲染的html代码区域

html2canvas(document.getElementById('view'), \{

onrendered: function(canvas) \{

document.body.appendChild(canvas);

\},

\});

4.HTML代码转换成图片

思路，先把html代码转换成canvas，再将canvas转换成图片，但是这样要经过两步，而一般的需求都是一次性将html代码转换成图片。

经过试验，发现，在html2canvas工具中可以直接集成.canvas转换成图片的代码，如下：

html2canvas(document.getElementById('view'), \{

onrendered: function(canvas) \{

var image = new Image();

image.crossOrigin = '\*'; //用以解决跨域问题

image.src = canvas.toDataURL("image/png");

document.body.appendChild(image);

\},

\});

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关 js跳转(js跳转网页)

如何使用js跳转代码 javascript常用的页面跳转方法为： window.location.href=some\_url; 下面举例演示点击按钮后，延迟3秒跳转

绝地灬酷狼/ 2023年09月23日 18:39/ 0 赞/ 58 阅读

相关 html2canvas、canvas2image将HTML网页生成图片

[html2canvas][] [canvas2image][] [参考这个文章][Link 1] [canvas教程][canvas] [html2canvas]

Love The Way You Lie/ 2023年01月18日 12:22/ 0 赞/ 10 阅读

相关 html2canvas.js----html网页指定div保存为图片canvas

1、使用到的插件:html2canvas.js [html2canvas官方网站][html2canvas] 2、使用： <div id="saveWra

不念不忘少年蓝@/ 2022年12月17日 00:29/ 0 赞/ 245 阅读

相关 zepto.js和canvas粒子网页动画

[下载地址][Link 1]使用canvas结合zepto.js实现的粒子效果网页背景，很有科技感的粒子网页背景动画特效。 ![1630569040.png][] dd:

た入场券/ 2022年09月10日 05:10/ 0 赞/ 175 阅读

相关网页粒子背景插件 -Canvas-nest.js

1、简介 Canvas-nest.js是一个非常好看的网页粒子背景插件，不需要依赖任何第三方库即可运行，提供额非常炫酷的背景。 2、特点不依赖于任何框架或者

野性酷女/ 2022年07月13日 13:43/ 0 赞/ 278 阅读

相关超炫网页背景效果canvas-nest.js

介绍： canvas-nest.js是一个基于canvas动态绘制的蜂窝状网站背景。鼠标在上面拖动可以绘制图形，当鼠标移开的时候，会绽放，超级炫酷。特性：

小灰灰/ 2022年06月14日 02:47/ 0 赞/ 311 阅读

相关 js(网页，代码，canvas）转图片

一般来说html代码不能直接转换成图片，需要先转换成canvas在由canvas转换成图片。本文将介绍以下几种情况： 1.图片转换成canvas 2. can

短命女/ 2022年06月07日 00:09/ 0 赞/ 427 阅读

相关 html2canvas.js截取网页保存为图片

<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Content-typ

Myth丶恋晨/ 2022年06月04日 01:15/ 0 赞/ 221 阅读

相关 DIV转成图片并导出html2canvas.js

小猿目前接到一个需求就是把一个页面转成图片并导出上网查到各种工具所采用的就是html2canvas.js （里面代码没细看）这个工具相当不错，我们可以将某一个DIV或者

╰+攻爆jí腚メ/ 2022年06月01日 14:05/ 0 赞/ 306 阅读

相关 js+canvas 图片+文字合成

<style> img \{ border: solid 1px \ddd; \} </style> 主体： <

「爱情、让人受尽委屈。」/ 2022年03月31日 14:52/ 0 赞/ 422 阅读