html2canvas+canvas2image 做vue移动端页面海报

做了3天左右,海报的效果终于实现了,我只想说太坑了......................

 首页介绍2个插件1 html2canvas   是把DOM结构生成canvas2 canvas2image   是把canvas生成图片//原生canvas.toDataUrl()

安装
yarn add html2canvas
yarn add canvas2image
注意canvasimage安装后可能会引入失败, 找到canvasimage.js 自己放到一个位置引入

//DOM节点
<div id='posterMiddle'>//...所以的内容用html2canvas 生成
</div>
//展示图片的位置 可以用定位想法哪里都可以
<div id='Image'></div><script>import html2canvas from 'html2canvas'import Canvas2Image from '../../utils/canvas2image'export default {methods:{toImage(){let domObj = document.getElementById("posterMiddle");//获取到DOM节点的位置let width = domObj.offsetWidth;let height = domObj.offsetHeight;//DOM元素的宽高let canvas = document.createElement("canvas")//创建canvaslet scale = 5//放大比例设置5倍canvas.width = width * scalecanvas.height = height * scale//画板的宽高let options = {logging: true,//日志开关，在控制台可以查看html2canvas的内部执行流程width: width,height: height,//避免下载不全useCORS: true,//【重要】开启跨域配置scale: scale, canvas: canvas,//自定义属性}html2canvas(domObj, options).then((canvas) => {let context = canvas.getContext('2d') //关闭锯齿context.mozImageSmoothingEnabled = falsecontext.webkitImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falselet img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height)// 这就是把canvas转化为图片document.getElementById('Image').appendChild(img);//展示图片的DOM节点img.style.width = canvas.width/5 + 'px';img.style.height = canvas.height/5 + 'px';})}}
}
</script>

`2个问题`

1为什么要设置sacle? sacle可以设置任意倍数

html2canvas 官方文档说了,屏幕截图基于DOM,无法真实表示100％的准确度

举个简单的例子,我们自己拍的照片是500x500的,把这张图片发给朋友,传输的过程中可能会对图片进行处理,传过去的图片,清晰度可能受到损坏,
同理,把500x500的图片压缩成50x50传过去会比500x500清楚的多

这里我们把画板的width height,放大了原来的2倍或者几倍,最后生成图片的时候压缩img的尺寸,就解决了模糊度问题.

2. 手机端不能下载到相册,

我在查找资料的时候,发现手机端不允许下载图片,所以在项目中改成了长按保存,img标签的特性,这个问题我估计,以后会慢慢解决的,希望可以共同进步.

html2canvas+canvas2image 做vue移动端页面海报相关推荐

Vue移动端----页面旋转进入特效功能实现
[Vue移动端]页面进入特效实现–翻转白云悠悠苍狗悠悠茶水一杯温润入喉本来今日正在浏览csdn 学习学习Koa 秃然微信 " ding" 嚯?什么情况?先瞅瞅 CSS?这 ...
vue移动端页面demo
一.调查表页面(展示效果) 根据网上许多移动端项目案例,总结其他方法,汇总方法如下. 二.vue移动端项目搭建 1.在安装了node.js的前提下,使用以下命令 npm install --g vue ...
【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
Vue移动端页面下拉刷新
这篇小作文有点长,不想看的朋友可以直接去找找vant组件中的 van-pull-refresh 朋友们,我这两天干了一件蠢事最近我们公司有一个移动端项目,是嵌在微信公众号中的,有一个新需求是给页面加 ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
淘宝——移动端页面终端适配
注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录适配的要求适配的方法,3个步骤适配中背景图片的处理适配的原理解析摘 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
乐鑫Esp32学习之旅 18 入门京东微联·小京鱼的控制面板H5开发，读懂vue语法，做自己的控制页面。
本系列博客学习由非官方人员半颗心脏潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. 爬坑学习新旅程,虚拟机搭建esp32开发环境,打印 " ...

html2canvas+canvas2image 做vue移动端页面海报

`2个问题`

1为什么要设置sacle? sacle可以设置任意倍数

2. 手机端不能下载到相册,

html2canvas+canvas2image 做vue移动端页面海报相关推荐

最新文章

热门文章