H5通过html2canvas，canvas2image生成图片

首先安装html2canvas，canvas2image

npm i html2canvas
npm i canvas2image
复制代码

引用

import html2canvas from 'html2canvas';
import canvas2image from 'canvas2image';  ....  var box = document.getElementById("box"); //生成的DOM元素
var img = document.getElementById("img"); //需要展示的图片
//生成canvas
html2canvas(box).then(function(canvas) {//生成图片let url = canvas2image.saveAsPNG(canvas,true).getAttribute('src');img.src = url;
});
复制代码

注意项

页面中如果引用跨域的资源图片，最终生成的图片会漏掉这些资源。建议使用同源资源
或者使用 html2canvas 的配置项 allowTaint；
页面中不要使用 css translate 属性，可能会丢失偏移的部分位置；
复制代码

html2canvas配置项

转载于:https://juejin.im/post/5c4f0aa06fb9a049f5718a58

H5通过html2canvas，canvas2image生成图片相关推荐

html2canvas+canvas2image 做vue移动端页面海报
做了3天左右,海报的效果终于实现了,我只想说太坑了...................... 首页介绍2个插件1 html2canvas 是把DOM结构生成canvas2 canvas2image ...
Vue.js结合Canvas制作二维码和图片的合成（html2canvas + Canvas2Image）--整理
之前写过一篇关于二维码和图片合成的博文,但是存在一些问题,本篇是本人整理最后在项目中使用的. 建议:如果是单张背景图或者是多张背景图且二维码在同一位置的话,建议直接在后台合成分享图直接给前端返回即可, ...
用html2canvas长按保存h5页面,html2canvas - 微信中长按存图 - 将h5活动结果保存到本地...
现在有很多在微信里流行的h5活动页.这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答案.比如这个就是最后那张结果图: 当时自己 ...
h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
canvas 实现图片局部模糊_小技巧!H5使用Html2Canvas实现自动截屏（下）
上文写到使用html2Canvas实现截屏.上次留了一个问题,如果当前dom元素对象比较大,比如包含一个比较大的图片等,在将dom序列化成字符串时,极易导致字符串超长.对于超长的内容,后台程序将获取不 ...
vue项目使用html2canvas 元素生成图片
html2canvas学习官网:http://html2canvas.hertzen.com/ 第一步:安装使用npm安装 npm install html2canvas --save 使用y ...
html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
html2canvas在不同设备生成图片大小不一致问题
场景描述: 使用html2canvas将移动端的一整个页面或者页面中的部分内容生成图片. 当要生成的内容宽高不固定时,比如:全屏显示的页面,那么,在不同分辨率设备上,就会生成出不同大小的图片,虽然生成 ...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...

H5通过html2canvas，canvas2image生成图片

首先安装html2canvas，canvas2image

引用

注意项

H5通过html2canvas，canvas2image生成图片相关推荐

最新文章

热门文章