html2Canvas生成图片

首先，毋庸置疑，需要引入如下文件：

方法一:html转canvas，canvas转换成url，然后利用a标签的download属性，直接下载

1）html代码如下：

    
    
下载内容1。。。。。。。。。
    
下载内容2。。。。。。。。。

2）js操作：

说明：JavaScript 使用 id 来寻找 canvas 元素：然后创建 context 对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

   var canvas2 = document.createElement("canvas");
   var wid= document.querySelector('#canvansBorder');
   var w = document.body.clientWidth;
   var h = document.body.clientHeight
   canvas2.width = w*2;
   canvas2.height = h * 2;
   //获得2维绘图的上下文
   var ctx=canvas2.getContext("2d");
    // 屏幕的设备像素比
    var devicePixelRatio = window.devicePixelRatio || 1
    // 浏览器在渲染canvas之前存储画布信息的像素比
    var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    // canvas的实际渲染倍率
    var ratio = devicePixelRatio / backingStoreRatio
    ctx.scale(1*ratio, 1*ratio)
html2canvas(document.querySelector('#canvansBorder'), { canvas: canvas2}).then(function(canvas) {
    //document.body.appendChild(canvas);
    //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
    document.querySelector(".down").setAttribute('href', canvas.toDataURL());
})

方法二：绘制canvas,利用Canvas2Image保存为图片

1）html代码如下：

save

2）js代码如下：

let canvas = document.getElementById('cvs');
let ctx = canvas.getContext('2d');
//此处可以进行一系列操作 比如设置背景、绘制文字、绘制图片、设置字体大小、设置canvas缩放
ctx.fillStyle('#FFFFFF');
ctx.fliiRect(0,0,800,400);
let img=document.getElementById("tulip");//图片源
ctx.drawImage(img,0,0,200,200)
$save = document.getElementById('save')
$save.onclick = function (e) {
     let type='png'
     let w = $imgW.value,
     let h = $imgH.value;
     Canvas2Image.saveAsImage(canvas, w, h, type);
}

canvas常用方法参数说明：

1）fillStyle():填充颜色

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于填充绘图的 pattern 对象

填充渐变色：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

 

2）fillRect() :绘制“已填色”的矩形。

context.fillRect(x,y,width,height);

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

3)  scale():缩放当前绘图，更大或更小。

参数	描述
scalewidth	缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight	缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(0,0,20,20);
ctx.scale(2,2);

4)  fillText() :在画布上绘制填色的文本。

ctx.fillText(text,x,y,maxWidth);

参数	描述
text	规定在画布上输出的文本。
x	开始绘制文本的 x 坐标位置（相对于画布）。
y	开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth	可选。允许的最大文本宽度，以像素计。

5)  drawImage()：在画布上绘制图像、画布或视频。

在画布上定位图像：context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）