使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】

最新推荐文章于 2024-07-15 16:32:01 发布
最新推荐文章于 2024-07-15 16:32:01 发布
阅读量482 收藏
点赞数
分类专栏： 前端笔记 HTMLCSS JavaScript 文章标签： javascript canvas js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48206613/article/details/116128134
版权
本文介绍了如何利用CSS3的Canvas将一张固定图片和一张二维码图片合成为一张新的图片。通过HTML和JavaScript实现图片的绘制，并探讨了html2canvas插件作为替代方案的可能性。
摘要由CSDN通过智能技术生成

CSS3 Canvas 实现两张图片合成一张图片

需求

需求：在项目中遇到将一张固定图片和一张二维码图片合成一张新图片，并且用户能够将图片保存下载到本地。

思路：使用 CSS3 中的 Canvas 将两张图片绘制。

HTML 部分

<div>
  <img id="img1" src="wenbo.jpg" alt="" />
  <img id=
最低0.47元/天 解锁文章
耶温
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas来实现两张图片合成一张
dusk1712的博客
01-04 1万+
写在开头： 最近遇到一个需求，就是上传一张图片，原来的图片作为底图，两张图片组合在一起，形成一张新的图片。并能点击另存。         网上各种百度，谷歌。有很多方法。然后在我的需求里面都不是很适用。就结合前人的成果，自己又重新写了一套。         前端菜鸟一个，进了前端的坑之后才知道，前端的东西真的是太多了。 谨以此篇博客，告诫自己，要以虚心态度继续学习，不断学习才行。 这篇博
js+canvas实现两张图片合并成一张图片的方法
10-16
主要介绍了js+canvas实现两张图片合并成一张图片的方法,结合实例形式分析了JavaScript结合HTML5 canvas实现图片合并的操作技巧,并附带了Java图片合并的实现方法,需要的朋友可以参考下
canvas图片合并
贝贝的博客
10-31 753
​ 接口返回两个图片数组，原图、水印图，其中原图数组需要通过接口调用数组子项的值拿到真实的原图地址，然后将原图和水印图一一对应，合并成页面展示的图片。画图函数返回一个 Promise 对象，然后通过 Promise.all([原图promise,水印图promise]) 等两张图片加载完后再合并图片。此时我们已经有了原图和水印图的 Promise数组，通过for循环调用画图函数,传参为 画图函数(原图[i], 水印图[i], 宽度, 高度)通过Promise.all()拿到所有的真实原图地址。
js两张图片合成一张图片，使用canvas方法
最新发布
白白的博客
07-15 239
是拿到本地的图片，因为vite不能用import语法，只能使用这个语法 new URL(注：图片是本地的图片，因为我用接口返回的图片地址的图片会有跨域问题，只好把要合成的图片放assets里。是将画布转为base64图片。
使用canvas将多张图片合并为一张
Xue_BT的博客
02-21 8127
将多张图片合并为一张
uni-app通过canvas将两张图片合成一张图片
weixin_45781661的博客
03-09 7153
uni-app通过canvas将两张图片合成一张图片 <template> <view class="share"> <button type="default" @click="exportPost"></button> <view id="pre_style"> //预览合成的图片 <image :src="page_data.post_img" mode="heightFix" class='poster'>
运用canvas将两张图拼接成一张图
Jana Jing的分享
04-15 3207
运用canvas将两张图拼接成一张图
canvas合并多张图片成一张
no_one_but_you的博客
06-28 1190
canvas合并多张图片
js canvas实现5张图片合成一张图片
10-16
本文将详细介绍如何使用JavaScript的Canvas来实现5张图片合成一张图片的过程，这在很多场景中都非常有用，例如制作拼图游戏、创建在线拼贴画等。 首先，我们需要了解Canvas元素的基本概念。Canvas是一个HTML元素，...
canvas实现二维码和图片合成的示例代码
12-13
在本文中，我们将探讨如何使用JavaScript中的HTML5 Canvas API与`jr-qrcode`库来实现一个功能，即根据URL生成二维码并将其与另一张图片合并为一张新的图像。`jr-qrcode`是一个方便的库，它能够将文本数据转换为Base...
在Vue中用canvas实现二维码和图片合成海报的方法
10-16
在Vue.js中，使用canvas元素实现二维码和图片的合成海报是一项常见的需求，特别是在移动应用或网页设计中。本文将详细讲解如何在Vue项目中通过canvas完成这一任务。 首先，我们需要导入必要的图片资源，如海报背景...
微信小程序实现两张图片合二为一
qq_55900171的博客
11-07 3449
有的图片上传之后需要再加工,需要和一些背景图合并添加一些样式,这是个简陋的图片合并功能.欢迎交流.
利用canvas合并2张图片，并以图片或base64形式输出
qq_36566924的博客
04-11 3182
var id1Src=document.getElementById("id_img1"); var id2Src=document.getElementById("id_img2"); function getBase64(id1Src，id2Src){ var _width=parseInt($("#id_img1").width()/2.3); var _height=p...
Vue海报二维码组合图片生成和下载-qrcodejs2-html2canvas
JackieDYH的博客
05-09 778
项目核心完整代码-下载 演示 安装 npm install qrcodejs2 --save npm install html2canvas --save 核心代码-具体页面结构请看完整代码 //项目中使用 - 需要的地方直接引入使用即可 import QRCode from "qrcodejs2"; import html2canvas from "html2canvas"; //二维码生成 /** * @description 生成二维码 * @param {number} q
小猿圈web前端简述canvas如何实现二维码和图片合成
乐乐老师的博客
05-21 616
你经常看到活动海报什么的，上都是有各种宣传文案以及二维码形成的，你知道怎么用canvas实现二维码和图片合成，下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的。 使用url生成一个二维码，然后和另外一张图片合成一张图。实现思路是这样的： 使用jr-qrcode将url生成data:base64供img使用 然后使用canvas 将两张图合成一张图片 遇到的问题： 生成...
uniapp 生成分享图片(图片+二维码)，并保存到本地相册 功能实现
热门推荐
yehaocheng520的博客
08-30 2万+
生成分享图片 使用场景 在使用电商app时，通常有个分享给好友的功能，如果想要做分销类型，发展下线，也就是你邀请的好友是你的下级的话，就需要分享时将个人信息附带进去，因此会涉及到生成分享图片。 界面 点击上图中的“生成并保存图片”按钮，就会将图片及二维码合并成一张图片然后保存到手机本地相册。 此处的二维码是含有本人邀请码的下载app二维码。 生成分享图片功能 DCLOUD插件市场中，搜索“分享图”,可以看到第一个插件“canvas绘图，海报图，分享图，二维码生成”。 插件功能 支持多图片绘制，多文本绘制
原生微信小程序 如何将多张图片通过canvas生成一张图片
m0_57606222的博客
12-06 322
微信小程序 canvas 绘制图片
小程序开发 实现保存按钮下载图片，两张图片合成一张图片下载
06-10
好的，以下是示例代码实现小程序保存按钮下载图片，并将两张图片合成一张图片下载的功能： ```html <!-- wxml代码 --> <view> <image src="{{image1}}" mode="aspectFill"></image> <image src="{{image2}}" mode="aspectFill"></image> <button bindtap="saveImage">保存图片</button> </view> ``` ```javascript // js代码 Page({ data: { image1: 'image1.jpg', // 第一张图片路径 image2: 'image2.jpg', // 第二张图片路径 }, saveImage: function() { var that = this; wx.showLoading({ title: '正在生成图片...', mask: true }); // 获取第一张图片信息 wx.getImageInfo({ src: that.data.image1, success: function(res1) { // 获取第二张图片信息 wx.getImageInfo({ src: that.data.image2, success: function(res2) { // 创建画布 var ctx = wx.createCanvasContext('canvas'); // 设置画布大小 ctx.canvas.width = res1.width; ctx.canvas.height = res1.height + res2.height; // 绘制第一张图片 ctx.drawImage(that.data.image1, 0, 0, res1.width, res1.height); // 绘制第二张图片 ctx.drawImage(that.data.image2, 0, res1.height, res2.width, res2.height); // 画布转换成图片 ctx.draw(false, function() { wx.canvasToTempFilePath({ canvasId: 'canvas', success: function(res) { // 保存图片 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function() { wx.hideLoading(); wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail: function() { wx.hideLoading(); wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 }); } }); }, fail: function() { wx.hideLoading(); wx.showToast({ title: '生成图片失败', icon: 'none', duration: 2000 }); } }); }); } }); } }); } }); ``` 以上代码中，我们在页面中放置两张图片和一个保存按钮。点击保存按钮后，先通过 `wx.getImageInfo` 方法获取两张图片的信息（包括宽高等），然后创建画布，并设置画布大小为两张图片宽度相同，高度为两张图片高度之和。接着，我们通过 `ctx.drawImage` 方法绘制两张图片到画布上，并将画布转换成图片，最后调用 `wx.saveImageToPhotosAlbum` 方法将图片保存到相册中。 需要注意的是，由于获取图片信息和画布转换成图片都是异步操作，因此需要嵌套多个回调函数来保证操作的顺序和正确性。此外，为了能够将画布转换成图片，需要在页面中添加一个 `canvas` 标签，并给其指定一个 `canvasId`，这个 `canvasId` 需要在代码中使用到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值