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

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

 首页介绍2个插件
 1 html2canvas  	是把DOM结构生成canvas
 2 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")
          //创建canvas
          let scale = 5
          //放大比例设置5倍
          canvas.width = width * scale
          canvas.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 = false
              context.webkitImageSmoothingEnabled = false
              context.msImageSmoothingEnabled = false
              context.imageSmoothingEnabled = false
              let 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标签的特性,这个问题我估计,以后会慢慢解决的,希望可以共同进步.