1.两个图片保存的原理

要将两个图片保存下载，要使用h5的canvas来实现，不需要引用任何插件就可以实现。这里使用canvas的drawImage函数，利用这个函数可以将两个图片都放入画布中，然后调整画图片的位置，最后在使用canvas的转换图片方法下载，用法如下：
let canvas = document.createElement("canvas");
//设置区域大小
canvas.width = 200;
canvas.height = 300;let context = canvas.getContext("2d");//drawImage有多个参数（image，x，y，width，height）
context.drawImage(myImage, 0, 0, canvas.width, canvas.height);

2. 实现步骤

主要是将两个图片（可以是base64或文件路径）分别加入canvas画布中，在使用canvas的toDataURL方法，将画布中的内容转为base64，通过a链接下载（演示图片违规了，给二维码打了一个码）

代码运行样式：

悬浮上去显示保存提示：

点击后下载：

1.代码的html部分

<body><main class="complete-box"><!-- 背景图 --><div class="subject-box"><!-- 二维码 --><img src="./yuansusu.png" alt="我的二维码海报"></div><!-- 遮罩层 --><div class="block-box"><p>点击保存图片</p></div></main>
</body>

2.js代码（实现方法）

  let bgBox = document.querySelector('.complete-box')let blockBox = document.querySelector('.block-box')//绑定进入函数bgBox.addEventListener('mouseenter', () => {blockBox.style.display = 'block'})//绑定离开函数bgBox.addEventListener('mouseleave', () => {blockBox.style.display = 'none'})//绑定点击下载函数bgBox.addEventListener('click', () => {console.log('下载');//使用canvas来将两张图片合在一起let canvas = document.createElement("canvas");canvas.width = 200;canvas.height = 300;let context = canvas.getContext("2d");//创建一个矩形（x,y,width,height）context.rect(0, 0, canvas.width, canvas.height);context.fillStyle = "#fff";context.fill();//创建一个图片let myImage = new Image();//背景图片  你自己本地的图片、在线图片、base64图片流myImage.src = './wall.jpg';//运行跨域，有时候下载不是同源会阻止下载myImage.crossOrigin = 'Anonymous';myImage.onload = () => {//第一张图片的位置和大小context.drawImage(myImage, 0, 0, canvas.width, canvas.height);let myImage2 = new Image();//二维码图片myImage2.src = './yuansusu.png';myImage2.crossOrigin = 'Anonymous';myImage2.onload = () => {//第二张图片(设置居中位置)context.drawImage(myImage2, 20, 70, 160, 160);//转成base64流let base64 = canvas.toDataURL("image/png");let aLink = document.createElement("a");aLink.download = Date.now(); //使用时间戳给文件命名aLink.href = base64;aLink.click();}}})

3.css代码

<style>.complete-box {position: relative;width: 200px;height: 300px;margin: 0 auto;background-image: url(./wall.jpg);background-size: 100% 100%;display: flex;justify-content: center;align-items: center;}.subject-box {width: 160px;}.subject-box>img {width: 100%;}.block-box {position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-align: center;color: white;display: none;background-color: rgba(0, 0, 0, 0.3);z-index: 2;}</style>

结语：利用cavans还可以将多个图片拼接到一起，调整图片的位置来显示

js将两个图片保存下载（二维码保存为例）相关推荐

二维码内嵌图片，下载二维码
功能二维码可内嵌图片可下载二维码功能集合成Vue组件使用技术 Vue.qrcodejs2.html2canvas 直接上代码 <template><div class=&qu ...
qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码
文章目录一.通过qrcodejs2生成一个二维码二.点击[下载配置服务器二维码]来下载二维码 1.通过canvas去绘制边框+二维码+logo (1)为canvas增加绘制圆角矩形的方法(can ...
网页生成二维码把二维码变成图片下载二维码
目录网页生成二维码 1 将二维码变成图片 2 1效果:二维码变成了图片 2 下载二维码 2 1全部代码 3 网页生成二维码导入生成二维码需要的js文件(https://github.com/lrs ...
vue引用qrcodejs2生成、下载二维码、复制到剪贴板
使用的vue2.x版本,UI框架为ant design vue 1.X版本 1.场景:页面需要展示二维码并且需要下载二维码的功能效果图: 引用插件: yarn add qrcodejs2@0.0.2 ...
uniapp weapp-qrcode.js生成二维码，并下载二维码图片
找了很多插件,但是都太复杂,不符合自己的要求找了个最简单的.weapp-qrcode.js ,生成二维码没有问题,但是下载图片获取不到图片路径,自己稍微改造了一下 https://github.co ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
Java生成二维码并以IO流的形式返回给前端展示(不需写入服务器)，以及下载二维码图片
目录场景方案分析第一步--引入依赖第二步--编写工具类第三步--编写API接口第四步--访问测试第五步--下载图片场景最近笔者做的项目中,有一个需求: 在系统中生成一个二维码,用户保 ...
JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...
vue3+qrcode插件实现下载二维码图片（.png、.svg格式）
注释:qrcode可通过canvas的toDataURL方法下载对应的png图片,比较恶心的是下载svg格式(必须记录一下) 安装一下qrcode插件 npm i qrcode --save 或 ya ...
记录使用QRCode 显示并下载二维码图片
记录使用QRCode 生成二维码项目安装qrcode 命令:npm install --save qrcodejs2 引入 import QRCode from 'qrcodejs2' 后端提供qr ...

js将两个图片保存下载（二维码保存为例）

1.两个图片保存的原理

2. 实现步骤

1.代码的html部分

2.js代码（实现方法）

3.css代码

结语：利用cavans还可以将多个图片拼接到一起，调整图片的位置来显示

js将两个图片保存下载（二维码保存为例）相关推荐

最新文章

热门文章