关于使用html2canvas 绘制图片的坑

大地飞鸿 2019-12-24

html2canvas绘制跨域图片之后，会导致画布被污染，从而无法使用canvas的toDateUrl()等方法获取图片数据的方法，这是canvas的限制而并非html2canvas的原因。好了锅甩好了下面进入正题

  公司最近有一个需求，保存一张海报，但是卡在了将绘制后图片转化成base64的个砍上。查了下原因，就是因为绘制了跨域图片，从而导致画布无法导出成数据。行吧既然是跨域，那么就和后台说一下，把特定的图片的Access-Control-Allow-Origin设置成*吧，但是改完之后的结果却又不尽人意

  在chrome上确实可以导出了，但是在safari上虽然没有爆出画布污染，能导出了，但是跨域图片在绘制后是一片空白。这就有点无奈了。

 最后只能使用

 将图片转化成base64之后，再使用html2canvas绘制，这样虽然解决了画布污染，和绘制空白的问题，当是后台那边的开销就有点奢侈了，不知到那位大神有没有更好的解决方案。

 最后在加一句。开发h5app的同学，再ios上使用html2canvas绘制本地图片（img src=”../../img1.png“）都会出现画布污染的情况

大地飞鸿

大地飞鸿

相关推荐

html2canvas 在IOS系统13.4以上失效的问题解决方法

后马上去github上查看是否有同道中人遇到类似问题。// 修改后代码 主要将 html2canvas 修改为

songfens / 0评论 2020-07-04

html2canvas使用心得

近两年做了几次微信H5活动的开发，为了达到传播分享的效果，通常最终都需要生成个性化的图片，供用户长按保存分享，在这里就把自己的一些使用心得记录下来，供其他小伙伴借鉴。这里备注一下，我目前用的是html2canvas0.5.0-beta4 版本，这篇文章也以

MIKUScallion / 0评论 2020-06-11

html2canvas截取图片跨域解决办法

{useCORS:true,logging:true}解决图片跨域，截图不全的问题。

jinxiutong / 0评论 2020-05-31

vue使用html2canvas生成图片并保存到本地

<el-button type="warning" @click="saveQrCode">保存二维码</el-button>

songfens / 0评论 2020-03-20

vue使用html2canvas实现移动端H5页面截图

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。<

northwindx / 0评论 2020-01-04

html2canvas 还是要这个人的版本才是正宗的

https://github.com/eKoopmans/html2canvas https://www.jianshu.com/p/f400634646d6

jinxiutong / 0评论 2019-12-27

vue生成pdf

let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离。let win_out = window.innerWidth; // 获得当前窗口的宽度。// allowTaint: true, //允许 can

songfens / 0评论 2019-12-06

使用html2canvas.js实现功能中遇到的一些问题

[1]我要实现的功能是用户填写完表单后，点击提交按钮，截图。截图放在一个弹层里面，给一句提示"长按图片保存至手机"。第二个问题，我用的手机是华为，用谷歌浏览器长按图片发现没有下载图片选项。这篇文章的第三张和第四张图片是我顺手截图展示效果

飞翔的鱼 / 0评论 2019-11-17

html,vue转换成PDF

var element = $; // 这个dom元素是要导出pdf的div容器。var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离。var win_o = window.inner

大地飞鸿 / 0评论 2019-11-08

vue 使用html2canvas将DOM转化为图片的方法

我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的b

fanbih / 0评论 2018-09-11

页面直接导出为PDF文件，支持分页与页边距

将WEB页面直接导出为pdf文件是经常会用到的一个功能，尤其是各种报表系统。总结了一下目前几种主流的做法：。在后端用代码生成pdf文件，比如iText一类；方案3的优势在于前端直接生成，所见即所得。今天要探索的就是html2canvas和jspdf，前者用

songfens / 0评论 2019-10-21

canvas2image 开发中遇到的问题

使用image/jpeg格式，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。测试的时候，好奇为啥每次，生成的图片都缺一部分，而且都是从顶部开始空白，再绘制图片。ios 生成图片时显示时

yixiaof / 0评论 2019-09-05

Vue将页面导出为图片或者PDF

bstr = atob, n = bstr.length, u8arr = new Uint8Array;let shareContent = document.body,//需要截图的包裹的（原生的）DOM 对象

blair / 0评论 2019-06-10

从灭霸的无限手套说起

本文不是技术文章，只是单纯记录下最近妇联4在热映，先剧透两个精彩片段。前两天看到Google搜索有个彩蛋，搜索灭霸或者thanos，点击右边的无限手套触发彩蛋，打个响指，消灭一半的搜索结果条目，消失特效类似电影里的。html页面DOM转canvas粒子效果

lanseguhui / 0评论 2019-07-01

把HTML转成PDF的4个方案及实现

在本文中，我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。该页面基本上是患者病例的报告和数据可视化结果，其中包含许多 SVG。另外还有一些特殊的请求来

church / 0评论 2019-07-01

【Vue 实践】页面生成 pdf 文件-01

介绍为了找工作，花了七八天完成了自己的线上简历，结果发现并没有人来看这东西。说实话，这个是自己的第一个前后端项目，自我感觉还好，结果根本没人在意，一定是我做得太差，那就得好好改这个项目，增加功能。想一下目前要做的事情，提上对应的 Issue，再加上对应的标

lanseguhui / 0评论 2019-07-01

使用html2canvas将页面转成图，用canvas2image下载

之前在网上找到一个用 <a> 的 download属性下载的方法，确实很简单也很方便，但此方法不支持IE，无奈又找到另一方法。require;canvas2image.js 需要改动一下，以便绑在window上。Canvas2Image提供了下

Yaro / 0评论 2019-07-01

网页html生成图片的常用方案

聪明的你可能会想到canvas是否可以生成一个这样的图片呢？没错，今天就给大家推荐一个简单又好用的工具html2canvas。准备文件进入该官方网站点击此处，在官网首页开始下载资源文件，html2canvas.js或者html2canvas.min.js皆

yaosir / 0评论 2019-07-01

浏览器端用JS实现创建和下载图片

问题场景在前端很多的项目中，文件下载的需求很常见。尤其是通过JS生成文件内容，然后通过浏览器端执行下载的操作。如图片，Execl 等的导出功能。日前，项目中就遇到了这类需求，在浏览器端实现保存当前网页为图片，然后还可以下载。解决方案网页生成图片这里可以采用

yixiaof / 0评论 2019-06-30

使用canvas保存网页为pdf文件支持跨域

之前上一篇随笔说了Canvas截图网页为图片，下来个新需求，把网页截图后保存为PDF文件供用户下载。//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//h

蒲厷渶戀 / 0评论 2019-06-29

移动端 html2canvas 踩坑记录

背景最近在做的微信 html5 项目有个需求：页面包含 一张大的背景图片 + 一个用户的链接二维码图片 拼成一张图片，让用户长按保存的时候，可以把整个页面都保存起来，而不是只保存二维码。因此决定在前端完成。考虑到移动端对 html5 新特性支持得比较好以及

yaosir / 0评论 2019-06-29

html2canvas.js网页截图功能

其中，都可识别图中的二维码。首先，先来科普一下微信网页识别二维码原理：截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。//修改源码，添加自定设置高度宽度var width = options.width !t

蒲厷渶戀 / 0评论 2019-06-28

html2canvas以及domtoimage的使用踩坑总结

开始踩坑一.html2canvas对于跨域图片，转换的时候会将跨域图片识别为空白。

Yaro / 0评论 2019-06-28

移动端H5页面生成图片解决方案

现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！少啰嗦，先看东西！！！drawCanvas2.由于现在的手机都是高清屏，所以如果你不做处理就会出现模糊的情况，为什么会出现模糊

theRoom / 0评论 2019-06-28

html2canvas关于图片不能正常截取

需要前端根据后端传过来数据，动态的生成图片。但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。这也就是为什么转换出来的canvas有些图片一直是空白的原因。解决方案对静态资源做一次转

Yaro / 0评论 2019-06-28

jspdf + html2canvas 实现html转pdf (提高分辨率版本)

var element = $; // 这个dom元素是要导出pdf的div容器。var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离。var win_o = window.innerWi

New丶Elements / 0评论 2019-06-28

html2canvas

The screenshot is based on the DOM and as such may not be 100% accurate(精确) to the real representation as it does not make an ac

Ysiqiqi / 0评论 2016-03-18

将HTML页面转换为PDF文件并导出

目前，在大多数的管理系统中，都会有这样一个功能：根据相关的条件查询相应的数据，并生成可视化报表，然后可导出为PDF文件。将新的元素设置为position:absolute; 脱离文档流，因为处于文档流中被浏览器遮挡的部分不会生成PDF。利用jspdf.mi

wxcmdn / 0评论 2019-06-26

angular2中使用html2canvas将数据导出为图片，并下载本地

import * as html2canvas from 'html2canvas';3、定义方法，将数据转换为canvas. // 然后给初始化的public canvasImg: any = ""; 复制，他就是图片地址。<i

bertZuo / 0评论 2019-06-26

网页保存为图片及高清截图的优化 | canvas跨域图片配置

本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。小结: html2canvas是目前实现网页保存为图片功能的综合最

laxexue / 0评论 2019-06-25

Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）

最近碰到个需求，需要把当前页面生成pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要 ：）。html2canvas简介我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面D

yaosir / 0评论 2019-06-21

js实现截图功能

前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做。我这个主要就解决这个批量的人力的优化。好，废话不多说了。直接上逻辑和代码。这个问题的解决方案：html to canva

yixiaof / 0评论 2019-06-21

扣丁学堂告诉你html2canvas把div保存图片高清图的方法

if(confirm('是否下载肌肤检测报告？

sailorlunaxi / 0评论 2018-12-18

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求，需要把当前页面生成 pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要 ：）。我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行“截图”。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信

MIKUScallion / 0评论 2018-08-25

js实现截图保存图片功能的代码示例

前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做。我这个主要就解决这个批量的人力的优化。好，废话不多说了。直接上逻辑和代码。这个问题的解决方案：html to canva

church / 0评论 2017-02-16

Vue导出页面为PDF格式的实现思路

通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..看了他们的文章,做了如下整理..说起来很容易,那么具体怎么实现呢?let imgHeight = 592.28 / contentWidth * cont

星星有所不知 / 0评论 2018-07-31

Vue网页html转换PDF（最低兼容ie10）的思路详解

所以建议在做截图的时候，将页面代码复制一份到隐藏域，在隐藏域里面做修改，这样就不会修改页面原有样式了。　　　　// 因为在ie10下，会出现input样式丢失的情况，所以在此处清楚input的标签的边框。let imgHeight = 592.28 / c

王光 / 0评论 2017-08-24

vue中将网页打印成pdf实例代码

整理文档，搜刮出一个vue中将网页打印成pdf的代码，稍微整理精简一下做下分享。let imgHeight = 592.28 / contentWidth * contentHeight. jsPdf.debug.js这两个插件库可轻松百度到。如果esli

Yaro / 0评论 2017-06-15

Javascript保存网页为图片借助于html2canvas库实现

});Note:html2canvas()第一个参数为要生成canvas的区域，如果整个网页生成canvas，则是document.body。第二个参数详见官网设置canvas的各种属性，当然修改源代码可以添加自己想要的属性，如给canvas添加id等。

northwindx / 0评论 2019-04-24

使用jspdf生成pdf报表

由于前台html已经动态生成报表，而且，前台有一个功能，一个date range组件，当你拖动的时候，报表会在不提交到后台的情况下动态变化。因此需要用到js生成生报表：。由于报表还需要保持原html页面的外观，但是又不是整个html，真正需要转换成pdf报

WebZhangJian / 0评论 2019-04-21

Vue中使用canvas方法总结

v-html只能渲染出一个字符串, 没办法像appendChild那样插入canvas对象。所以通过import方式，在需要的组件里面引入，但是，html2canvas不支持import这种导入形式。下面通过修改html2canvas的源码，让其支持imp

旸君颜 / 0评论 2019-04-02

html2canvas 实现dashed虚线边框

html2canvas是一个将html元素生成canvas的库，绘制的canvas大部分样式和CSS一致。比如截止1.0.0-alpha.12，虚线边框依然绘制为实线，border-collapse依然有问题。这里根据github issues里的一个思路

前端外刊评论 / 0评论 2018-04-14