关闭

使用html2canvas将页面转成图

时间: 2019-03-26阅读: 1554标签: 图片

之前在网上找到一个用 <a> 的 download属性下载的方法,确实很简单也很方便,但此方法不支持IE,无奈又找到另一方法。

使用html2canvas将页面转成图,用canvas2image下载

本例使用的版本:

html2canvas@1.0.0-alpha.12
canvas2image@1.0.5

安装

npm install html2canvas canvas2image --save

引入

import html2canvas from 'html2canvas';
require('./canvas2image.js');

canvas2image.js 需要改动一下,以便绑在window上

(function($){
    Canvas2Image = function () {
    ...
    }
}

_dataURL 可以用来回显,Canvas2Image.saveAsPNG(canvas) 会直接下载。
Canvas2Image提供了下面几种方法:

Canvas2Image.saveAsImage(canvasObj, width, height, type)
Canvas2Image.saveAsPNG(canvasObj, width, height)
Canvas2Image.saveAsJPEG(canvasObj, width, height)
Canvas2Image.saveAsGIF(canvasObj, width, height)
Canvas2Image.saveAsBMP(canvasObj, width, height)

Canvas2Image.convertToImage(canvasObj, width, height, type)
Canvas2Image.convertToPNG(canvasObj, width, height)
Canvas2Image.convertToJPEG(canvasObj, width, height)
Canvas2Image.convertToGIF(canvasObj, width, height)
Canvas2Image.convertToBMP(canvasObj, width, height)

vue中可以用$refs 确定DOM;
backgroundColor: null,此句可使转出的图没有白边

methods: {
	toImage() {
	    let _this = this;
	    html2canvas(this.$refs.index,{
	        backgroundColor: null
	    }).then((canvas) => {
	        let _dataURL = canvas.toDataURL("image/png");                    
	        // _this.dataURL = _dataURL;
	        Canvas2Image.saveAsPNG(canvas)
	    });
	},


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2544

关闭

javascript如何判断图片是否存在?

JavaScript在实际应用中,可能有这样的需求,那就是检测一个图片是否存在。下面我们来看一下JavaScript如何判断图片是否存在。

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

网页图片不存在时不显示默认图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。

前端图片压缩上传(纯js的质量压缩,非长宽压缩)

此demo为大于1M对图片进行压缩上传,若小于1M则原图上传,可以根据自己实际需求更改。demo源码如下:

图片懒加载及异常处理

在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示

img图片不存在显示默认图

在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容。这时候用户体验不是很好,所以就需要显示一张默认图片

前端开发中对图片的优化技巧有哪些?

除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

Js怎么给图片打马赛克?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

vue中使用带隐藏文本信息的图片、图片水印

通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。最终达到如下效果:

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览,具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!