html2canvas(html转图片/html海报生成)

html2canvas 版本： 1.0.0-rc.4，这里说明下，不同的版本可能会有不同的表现形式。比如一开始用的最新的版本，出现了生成的图片中的文字无缘无故向下偏移一行，没有找到解决办法，于是降低了版本。

应用场景：本次是在vue项目中，几个不同的页面，有将整个页面生成海报，也有将弹框内容生成海报，所以将canvas方法单独封装了，需要的页面引入调用即可。当然，不是vue的项目，也可以使用我这方法，只是引入文件方式不一样。

新建canvas.js，将截图方法放入其中

import html2canvas from "html2canvas"function DPR() { // 获取设备dpiif (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;}return 1;
};
export function canvas(params, callback) {// params.dom 需要转成图片的dom  css选择器let content_html = document.querySelector(params.dom)let width = content_html.offsetWidth;let height = content_html.offsetHeightlet canvas = document.createElement("canvas")// 获取像素比let scaleBy = DPR()// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比canvas.width = width * scaleBy;canvas.height = height * scaleBy;// 设定 canvas css宽高为 DOM 节点宽高canvas.style.width = width + "px"canvas.style.height = height + "px"// 获取画笔// var rect = document.querySelector(params.dom).getBoundingClientRect();let context = canvas.getContext("2d")// context.translate(-rect.left, -rect.top);// 将所有绘制内容放大像素比倍// context.scale(scaleBy, scaleBy)// context.scale(1, 1)var opts = {allowTaint: false, //允许加载跨域的图片,默认false不可与useCORS同时存在tainttest: true, //检测每张图片都已经加载完成scale: scaleBy, // 添加的scale 参数，默认window.devicePixelRatiocanvas: canvas, //自定义 canvaslogging: false, //日志开关，发布的时候记得改成false// width: width, //dom 原始宽度,试过感觉影响不大// height: height, //dom 原始高度,试过感觉影响不大useCORS: true,ignoreElements: (element) => { //不需要转化的元素if (element.id == 'ig') return true},backgroundColor: null,// scrollY: 0,//通过外部调用地方传入// y: 0, //通过外部调用地方传入// dpi: scaleBy * 3};// 合并外部自定义参数(不同情况调用可能需设置不同参数)if(params.options) {opts = Object.assign( opts, params.options )}console.log(opts)html2canvas(content_html, opts).then(canvas => {var image = new Image()image.setAttribute("crossOrigin", "anonymous")// 获取生成的base64图片的urlvar imgUrl = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream")image.onload = function () {var canvas = document.createElement("canvas")canvas.width = image.widthcanvas.height = image.heightvar context = canvas.getContext("2d")context.drawImage(image, 0, 0, image.width, image.height)var url = canvas.toDataURL("image/png")// 回调，将生成的图片base64地址传出去，供调用的地方使用图片callback(url)// var a = document.createElement("a")// var event = new MouseEvent("click")// a.download = "图片"// a.href = url// a.dispatchEvent(event)}image.src = imgUrl})
}

页面调用:
首先引入上面的canvas,我这里是打开页面自动生成，所以最好在mounted生命周期中调用，最好加上this.$nextTick；如果是手动点按钮生成，就看实际情况调用

//页面
<div class="save-content>这个div是截图区域，里面内容按实际要求自己布局</div>
import { canvas } from "../../utils/canvas"
mounted(){this.$nextTick(()=>{setTimeout(()=>{this.loading = falsethis.getCanvas()},1000)//我这里延迟1s，是做了一个生成中的loading提示动画})},
methods: {// 截图getCanvas(){var that = this//dom对应页面上的css选择器选中的截图容器，option是另外的一些参数，回调是方法返回的图片base64，可以具体看上面的方法，一些配置参数也可以去html2canvas官网查看canvas({ dom: '.save-content', options: { scrollX: 0, scrollY: 0 } }, (res)=>{this.$nextTick(()=>{console.log(res)//这里的res就是上面封装的canvas方法回调返回的图片base64，可以按照自己的需求做后续操作})})},
}

一些坑：
截图容器外面的盒子最好不要有transform: translate 等属性，这些属性会造成生成的截图有时候正常，有时候又有很大的偏移，如果有弹框或其他内容需要居中，建议用flex布局；
在做整个页面截图的时候，若是顶部距离视窗有距离，生成的图片顶部有偏移，可在options里配置y参数，数量为.save-content容易距离顶部视窗的距离；
另外，在强调下版本，经常会因为版本问题出现一个问题而无法解决，所以有时候碰到问题解决不了了可以换个版本试试；
关于需要截图区域内有图片，并且图片跨域问题，必须图片服务器配置了允许跨域，不然前端怎么搞都没有用，，或者直接让后端将图片转成base64，在返回你base64也行，
最后，html2canvas就是个坑，看似很简单，入手后各种坑，大家使用中多采坑，多调试，一步步的成功

html2canvas(html转图片/html海报生成)相关推荐

Android 图片合成海报生成二维码，指定文字。
一 ,图片合成,海报增加二维码,文字,或者用户ID.先看图这个是没有合成之前的图. 合成之后的图. . 使用到的技术点 1,图片Glide 2, banner2.0 3, zxing class M ...
开源create-poster海报生成组件，客户用了都给我加鸡腿（图片又快又清晰，还能早点下班）
1.组件介绍 1.1最好用的海报生成组件: 生成速度快于html2canvas 生成图片质量高于html2canvas(实践后的结果) 代码结构更简洁,代码量更小,不需要html元素和css 组件更小 ...
【Web技术】929- 前端海报生成的不同方案和优劣
来自:SegmentFault,作者:JiaXinYi 链接:https://segmentfault.com/a/1190000038910770 一.背景工作中做了很多生成海报的功能,不同需求, ...
前端海报生成的不同方案和优劣
来自:SegmentFault,作者:JiaXinYi 链接:https://segmentfault.com/a/119000003891077 一.背景工作中做了很多生成海报的功能,不同需求,不 ...
H5二维码海报生成保存相关问题记录
H5二维码海报生成保存相关问题记录最近在开发H5页面中遇到二维码生成保存并下载到系统相册中的问题.问题大致分为:生成海报不全,未按照H5页面的显示进行海报保存,图片模糊等相关问题. 使用技术:qrc ...
小程序海报和H5海报生成
小程序海报和H5海报海报一.Canvas用法二.小程序海报 1. 小程序的canvas 2.使用示例 3.结果三.H5海报 1.安装插件html2canvas 2.使用示例 3.结果总结海 ...
canvas图片合成海报
canvas图片合成海报 //创建一共hb.js代码如下 var sthb = {//参数说明:info是一个对象里面主要传入的是绘制图片的宽高和图片的src还有我们生成的二维码图片的宽高位置init ...
【海报生成网站】最新设计海报生成器网站项目源码
简介: 这是一个海报生成器网站的最新源代码,组件列表在最左边.可以选择最左侧的组件,如文本.二维码.图片等.,添加到中间画布区域,并通过右边的属性调整面板调整添加组件的样式. 快速: 分三步完成海报开 ...
海报生成，画布与底图合并
海报生成,画布与底图合并问题:订单信息过多,在海报上出现文字溢出(文字显示不全)情况解决:创建一个画布(按照订单信息的多少设置可变的高度),然后与海报合并,最后加入二维码与文字水印不创建画布: ...

html2canvas(html转图片/html海报生成)

html2canvas(html转图片/html海报生成)相关推荐

最新文章

热门文章