Canvas 实现图片合成并下载合成图片

最新推荐文章于 2024-04-30 14:03:04 发布
最新推荐文章于 2024-04-30 14:03:04 发布
阅读量1.1k 收藏 2
点赞数
文章标签： java 前端 移动开发 ViewUI

 现在经常会遇到那种带二维码的推广图片，如下图所示：

1是整张推广图的背景，2是二维码。这种图片的背景是保持不变的，里面的二维码是变化的。所以我们需要把二维码单独生成然后与背景合并。

我们可以通过canvas绘图达到将2张图片合并的效果。

具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Html5 Canvas 实现图片合成</title>

        <style>
            body{
                text-align: center;
            }
            img {
                border: solid 1px #ddd;
            }
        </style>
    </head>

    <body>
        <div align="center">
            <img src="promote_store_bg.png">
            <img src="promote_store_qrcode.png">
        </div>
        <input type="button" value="一键合成" onclick="hecheng()">
        <a href="" download id="downloadPic">下载合成图</a>
        <div id="imgBox" align="center">
            
        </div>
        <script>
            function hecheng() {
                draw(function() {
                    document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">';
                    document.getElementById('downloadPic').href = base64[0];
                })
            }

            var data = ['promote_store_bg.png', 'promote_store_qrcode.png'],
                base64 = [];

            function draw(fn) {
                var c = document.createElement('canvas'),
                    ctx = c.getContext('2d'),
                    len = data.length;
                c.width = 400;
                c.height = 400;
                ctx.rect(0, 0, c.width, c.height);
                ctx.fillStyle = '#fff';
                ctx.fill();

                function drawing(n) {
                    if(n < len) {
                        var img = new Image;
                        //img.crossOrigin = 'Anonymous'; //解决跨域

                        img.src = data[n];
                        img.onload = function() {
                            if(n == 1) {
                                ctx.drawImage(img, 121, 129, 160, 160); //121和129表示二维码距离背景图片左上角的X轴，Y轴，160表示生成的图片中二维码的大小
                            } else {
                                ctx.drawImage(img, 0, 0, c.width, c.height);
                            }

                            drawing(n + 1); //递归
                        }
                    } else {
                        //保存生成作品图片
                        base64.push(c.toDataURL()); //通过canvas.toDataURL转成base64.
                        //alert(JSON.stringify(base64));
                        fn();
                    }
                }
                drawing(0);
            }
        </script>
    </body>

</html>

 

a标签通过添加download属性并把生成的base64赋值给a的href就可以直接下载图片了。

weixin_33910460
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas保存到本地图片三种方法
wogieni的博客
07-26 4万+
canvas保存到本地图片三种方法canvas保存本地图片第一种方法（修改图片的媒体类型，window.open直接下载）第二种方法（创建a标签，通过自己触发点击来下载）第三种方法（将图片数据转换成Blob数据，可以保存大图片） canvas保存本地图片 在公司做一个canvas的项目，遇到个需求 ：将canvas保存为图片，图片尺寸为12000*4000，一共用了好几种方法，最后才成功，特此记录...
vue3使用canvas画布合成图片
m0_73481765的博客
07-14 1512
标签绘制图形，并使用Canvas API对图形进行操作和绘制，其中包括了对图形进行合成的方法。在上面的例子中，先加载了两个图片，然后在第一个图片加载完毕后将其绘制到画布上，接着在第二个图片加载完毕后将其绘制在第一个图片上，并使用。方法将画布转化为图片，并打印出图片的Base64编码。更多关于Canvas API的使用可以参考。下面的例子将两个图片绘制到画布上，并使用。方法将需要绘制的图片绘制到画布上。将第二个图片与第一个图片进行合成。然后在Vue3的逻辑中，可以使用。
js+canvas合成图片实现微信公众号海报功能
最新发布
springdk2009的博客
04-30 230
在微信公众号开发中,很多时候都有个需求是一张图加上头像和昵称或者其他数据生成自己的二维码海报或者是生成分享海报。这个需求,php的gd库是可以实现的,但是用服务器进行图片合成,会消耗服务器大量的资源。二:使用html2canvas进行网页保存成图片//需引入html2canvas.js。一:js的canvas图片合成方法。所以我们可以考虑用以下方式实现。
canvas实现前端图片下载
Z姑娘早安
11-17 832
问题描述：前端下载图片可以使用一下两种方式 1、通过a标签直接打开，同域名下可以直接下载，不同域名下会打开新的标签页。项目中图片往往都是单独存储，很多不在同一个域名下。就用到下面第二种方式 2、通过canvas标签下载，代码如下： //data为图片URL downloadClickHandler(data:any){ if (!data) { return; } this.getUrlBase64(data).then((base
利用cavans，对图片进行下载，放大，缩小，旋转等功能
weixin_43843679的博客
12-01 696
<template> <div> <div class="pic-box"> <div id="canvasDiv"> <img ref="canvasBox" id="show-img" :src="data.path" @mousedown="mousedown" @mouseleave="leaveCo.
原生小程序使用canvas画布放置图片并下载图片
m0_71939262的博客
03-28 579
" color="#DF3535" bindtap="savaImage">下载</van-button>ctx.drawImage(image, 0, 0, canvas.width / dpr, canvas.height / dpr);canvas.height = res[0].height * dpr // 获取高。// 获取http图片宽高。
微信小程序实现的canvas合成图片功能示例
10-17
主要介绍了微信小程序实现的canvas合成图片功能,结合实例形式分析了微信小程序canvas合成图片相关组件使用、操作步骤与注意事项,需要的朋友可以参考下
canvas实现二维码和图片合成的示例代码
09-22
主要介绍了canvas实现二维码和图片合成的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在Vue中用canvas实现二维码和图片合成海报的方法
10-16
主要介绍了在Vue中用canvas实现二维码和图片合成海报的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js canvas实现5张图片合成一张图片
10-16
主要为大家详细介绍了js canvas实现5张图片合成一张图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5使用canvas绘制图片并下载
weixin_43866228的博客
04-01 2075
html5使用canvas绘制图片并下载简介新的如何构建画布、绘制图片、通过a标签进行下载1.绘制画布2.创建 context 对象3.生成一张图片_img14.图片跨域问题处理方法绘制图片 `代码片`.下载图片（使用压缩包的方式下载图片） 简介 HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 ...
JS多张图片合成一张图片代码.zip
07-11
JS多张图片合成一张图片代码是一款基于canvas制作多张元素图片合成一张效果代码。
js 利用canvas转换图片格式并下载图片
trenki的博客
05-05 1677
1.利用canvas转换格式 思路很简单，就是在canvas上drawImage，然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { //image一定是一个图片对象，不然获取不到宽高 var canvas = document.createElement("canvas"); // 新建canvas对象 canvas.wi...
前端使用canvas拼接多张图片
angelia_w的博客
05-16 1万+
应业务要求，要把使用canvas截取的app每一屏的图片拼接在一起。图片的地址存放在一个log文件中。 先了解一下drawImage() 方法： drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。 JavaScript 语法 1 在画布上定位图像： context.drawImage(im...
canvas将两张图片合并成一张图片并下载
weixin_44779945的博客
05-26 1487
用canvas将两张图片合并成一张图并下载（react） 图片合成部分 generateCodePic = () => { this.downloadImg(); }; downloadImg() { var canvas = document.createElement('canvas'); console.log(canvas); canvas.width = 600; canvas.height = 800; if (!canvas.getCo
HTML2CANVAS 合成图片
胡世林的博客
12-04 4119
html2canvas合成图片
js使用Canvas将多张图片合并成一张
weixin_45337170的博客
03-30 5741
解决方案 function mergeImgs(list) { const canvas = document.createElement('canvas') canvas.width = 500 canvas.height = 500 * list.length const context = canvas.getContext('2d') list.map((item, index) => { const img = new Image() img.src =
使用h5的canvas实现两张图片的合并
热门推荐
babulongbo的博客
12-18 2万+
思路： 1.首先等待图片加载完成 2.然后使用canvas完成图片的合并 3.显示合成图片 步骤： 1.根据第一个思路，需要image的load和error事件,大致流程： var l_image = new Image(); l_image.src = src; l_image.onload = function () {}； l_image.onerror = function
js将canvas保存成图片并下载
JSN___的博客
11-19 2687
js将canvas保存成图片并下载 <canvas id="canvas" width="400" height="400"></canvas> <div> <button id="save">保存</button> </div> var arr = [ {locations:[[0,0],[200,200],[0,400]],color:"red"}, {locations:[[0,0],[400,0],[2
在vue中用html2canvas合成图片并下载到本地
06-11
在Vue中使用html2canvas库合成图片并下载到本地的步骤如下： 1. 首先，安装html2canvas库。可以使用npm或yarn进行安装： ``` npm install html2canvas --save ``` 或 ``` yarn add html2canvas ``` 2. 在Vue组件中，引入html2canvas库： ``` import html2canvas from 'html2canvas'; ``` 3. 在需要生成图片的地方添加一个id，例如： ``` <div id="myCanvas">这是需要生成图片的内容</div> ``` 4. 在Vue组件中，编写生成图片的方法： ``` generateImage() { html2canvas(document.querySelector('#myCanvas')) .then(canvas => { // canvas对象是生成的图片 const link = document.createElement('a'); link.download = 'myImage.png'; link.href = canvas.toDataURL(); link.click(); }); } ``` 5. 在Vue组件中，调用生成图片的方法： ``` <button @click="generateImage()">生成图片并下载</button> ``` 这样，点击按钮后，就可以将指定id的内容生成为一张图片，并下载到本地。其中，`link.download`属性设置下载的文件名，`link.href`属性设置下载的文件路径，这里使用`canvas.toDataURL()`将canvas对象转换为图片的Base64编码字符串。最后，调用`link.click()`方法触发下载。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值