html2canvas前端生成图像小项目

最新推荐文章于 2024-06-20 00:19:56 发布

一只Walker

最新推荐文章于 2024-06-20 00:19:56 发布

阅读量265

点赞数

分类专栏： js 笔记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_43980192/article/details/130310026

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

介绍

这是一个在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();
       });