用vue PHP实现海报设计功能,有关vue html2canvas生成海报功能的实现

这是我第一篇简书文章，作为一名前端，而且现在电商比较流行的情况下很多电商公众号商城都用到了生成海报图片长按保存到相册然后可以转发给好友或者分享到朋友圈在Web前端中，生成图片非Canvas莫属而html2canvas.js就是一款非常优秀的插件

就比如我们想实现下面的这样的一个效果它现在是一张图片用户长按就会弹出系统的保存到手机的弹窗

1.首先我们要布局

上面就是整个html代码了 css代码就省略了

这一段代码呢就是当canvas执行完成之后html代码将会隐藏在原来位置会将图片展示上去然后用户可以长按保存我们用到了v-show

2 使用canvas生成图片

首先我们肯定要npm 下载和导入

下面一段是html2canvas执行的函数了

在执行时我们要确保页面都加载完毕所以我们最好是在页面里面的图片加载完毕之后去执行这个函数

也就是在这种图片load完成时去执行为了防止页面出现空白，同时我们加上了loading图为了给用户更好的体验很多人会遇到跨域的情况这是我们可以加入一些配置例如useCORS：true; allowTanit:true;表示我们允许跨域下面是官网提供的一些配置信息

官网链接: [link](官网链接).

## 3.过程中可能会遇到的问题

1.图片不显示这个可能的原因就是上面说的图片跨域了，设置下面两个为true就好了

2 清晰度问题当你觉得生成的图片不清晰时我们可以配置他的scale属性来调节它的清晰度

3.我也是最近才遇到这个问题就是代码没变突然就是ios14不能使用了没反应最后在我各方打听下原来也不是哦我们的问题我们只需要讲html2canvas的版本降级就好了下面是版本信息

由于是第一次在简书上写文章有需要改进的地方请指出我会改进的

用vue PHP实现海报设计功能,有关vue html2canvas生成海报功能的实现相关推荐

h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
前端生成海报图：html2canvas 生成海报图/网页html转图片
html2canvas 生成海报图 <html><head> <title>生成海报图Demo</title> </head><bod ...
Vue + html2canvas 生成海报
Html: <div class="record"> <div v-show=" ...
html2canvas手机黑屏,html2canvas 生成海报图开发中遇到的问题
ios里,生成的图片不显示 canvas.toDataURL('image/jpeg', 1.0) 使用image/jpeg格式,在指定图片格式为 image/jpeg 或 image/webp的情况 ...
html2canvas生成海报的各种问题
html2canvas (一)官网下载安装 (二)基础用法 (三)生成海报问题 canvas高分屏下的模糊问题 html2canvas图片模糊问题 canvas图片getImageData,toDat ...
php html生成海报jpg,html2canvas 生成海报
应用场景移动端H5 分享海报安装html2canvas 插件 npm install --save html2canvas Vue中使用 // 在Vue页面中引入 import html2canv ...
uniapp中，H5端使用html2canvas生成海报
项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以.最后解决方案是,把网络图片全部转成base64展示 ...
js常用插件(三)之html2canvas生成海报
js常用插件之html2canvas截图生成海报欢迎点击: 个人官网博客先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/aja ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...

用vue PHP实现海报设计功能,有关vue html2canvas生成海报功能的实现

用vue PHP实现海报设计功能,有关vue html2canvas生成海报功能的实现相关推荐

最新文章

热门文章