将h5页面转换为图片存到本地或相册

1、下载依赖

		npm install --save html2canvas

2、将html2canvas引入到此h5页面

		import html2canvas from "html2canvas"

3、页面代码示例

	
需要转为图片的内容
保存图片

4、事件

	//点击保存按钮转成图片
	savePicture() {
      console.log("save");
      html2canvas(this.$refs.picture).then(canvas => {
        this.imgUrl = canvas.toDataURL("image/png");
        this.saveFile(this.imgUrl, new Date().toLocaleString())
      });
    },
    //将图片保存到本地
    saveFile(data, filename) {
      const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;
      const event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
    },

你可能感兴趣的:(Vue.js,小程序)