html2canvas前端生成图像小项目_前端 canva 绘制生成图片

介绍

这是一个在js前端使用html2canvas生成图片的一个小应用,输入数字生成一个透明背景的图片，可以放在微信红包上唬人。

体验

欢迎来我博客体验

核心代码

实现图片的生成与下载

       //创建一个新的canvas
       var canvas2 = document.createElement("canvas");
       let _canvas = document.querySelector('#target');
       var w = parseInt(window.getComputedStyle(_canvas).width);
       var h = parseInt(window.getComputedStyle(_canvas).height);
       //将canvas画布放大若干倍，然后盛放在较小的容器内，以破解模糊
       canvas2.width = w * 2;
       canvas2.height = h * 2;
       canvas2.style.width = w + "px";
       canvas2.style.height = h + "px";
       var context = canvas2.getContext("2d");
       //放缩和转换图形到合适位置
       context.scale(2, 2.1);
       context.translate(0,-0.5);
       //生成并下载
       html2canvas(document.querySelector('#target'), { canvas: canvas2,backgroundColor:null }).then(function(canvas) {
           //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
           // 获取生成的图片的url,replace("image/png", "image/octet-stream") 作用是告诉浏览器不要打开直接下载
           var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
           var fileName = num+".png";
         //创建链接元素，以将下载文件命，如不命名需要下载后手动命名才可正常使用
           var link = document.createElement('a');
               link.setAttribute('download', fileName);
               link.setAttribute('href', imgUri);
               link.click();
       });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

参考自Js实现将html页面或div生成图片

完整代码

github