利用canvas合并两个海报
图片1 是个海报,图片2是个二维码,把这个二维码镶嵌到图片1 的指定位置上
function drawAndShareImage(opt, cb) {
if (!opt) {
console.error('没有图片');
return;
}
//imgSrc1 背景图片(二维码)链接
//imgSrc2 小图片(头像)链接
var canvas = document.createElement('canvas');
canvas.width = opt.width;
canvas.height = opt.height;
var context = canvas.getContext('2d');
var bgImage = new Image();
bgImage.src = opt.bgImage;
bgImage.crossOrigin = 'Anonymous';
bgImage.onload = function (){
context.drawImage(bgImage, 0, 0, opt.width, opt.height);
var index = 0;
for (var i = 0; i < opt.images.length; i++) {
var img = opt.images[i];
var imgDom = new Image();
imgDom.src = img.src; //背景图片 你自己本地的图片或者在线图片
imgDom.crossOrigin = 'Anonymous';
imgDom.onload = function () {
context.drawImage(imgDom, img.x, img.y, img.width, img.height);
index++;
if (index == opt.images.length) {
var base64 = canvas.toDataURL('image/png');
cb(base64);
}
};
}
}
}
//调用
drawAndShareImage(
{
width: 700,
height: 1300,
bgImage: bgImage,//图片资源
images: [
{
src: src,//图片资源
x: x,
y: y,
width: width,
height: height,
},
],
},
function (res) {
var myImg = document.getElementById(MyImg);
myImg.src = res;
}
);
<img style="width: 100%;display: block;" id="MyImg" src="" alt="" srcset="" />
利用canvas合并两个海报的更多相关文章
- 利用python合并两个文件
1格式如下 在做利用zabbix的api来批量添加主机的时候,需要处理ip和hostname,在借用别人写的py程序的基础上,自己有改装了以下脚本,为自己使用.需要时ip和hostname为一个统一格 ...
- 利用bat合并两个hex文件
单片机程序如果有IAP功能的话,就会生成两个hex文件,一个是Boot,一个是App,如果给让生产烧录两个文件,就会降低生产效率,所以在烧录前最好将两个文件合并成一个文件,烧录一次即可,合并方法如下: ...
- canvas合并两张图片
解析: 原理是一样的 画多张图需要一张一张画 也就是等图片onload成功后处理 这里代码写的比较随意 实际用的时候可以小粉转一下 也非常简单.我懒~~ 么么.. newImage(text) { / ...
- leetcode-88合并两个有序数组
合并两个有序数组 思路:利用索引合并两个列表,排序.注意不需要返回值,只修改nums1 class Solution: def merge(self, nums1: List[int], m: int ...
- 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
- HTML5利用canvas,把多张图合并成一张图片
需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...
- 用H5中的Canvas等技术制作海报
在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...
- 利用Canvas进行绘制XY坐标系
首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...
- 如何利用SVN合并代码
一. 背景 平时在进行开发时,一般都会有多版本同时进行,包括项目版本.周版本.紧急版本等,当某一个版本具备上线条件后,需要在上一个已发布的版本基础上进行发布,才能够避免出现版本相互覆盖,因此 ...
- Python合并两个numpy矩阵
numpy是Python用来科学计算的一个非常重要的库,numpy主要用来处理一些矩阵对象,可以说numpy让Python有了Matlab的味道. 实际的应用中,矩阵的合并是一个经常发生的操作,如何利 ...
随机推荐
- C#实现聊天消息渲染、图文混排(支持Windows、Linux)
在实现聊天软件时,渲染文字表情图文混排是一项非常繁琐的工作,再加上还要支持GIF动图.引用消息.撤回消息.名片等不同样式的消息渲染时,就更加麻烦了. 好在我们可以使用 ESFramework 提供的 ...
- R数据分析:孟德尔随机化中介的原理和实操
中介本身就是回归,基本上我看到的很多的调查性研究中在中介分析的方法部分都不会去提混杂,都是默认一个三角形画好,中介关系就算过去了,这里面默认的逻辑就是前两步回归中的混杂是一样的,计算中介效应的时候就自 ...
- 力扣---1148. 文章浏览 I
Views 表:+---------------+---------+| Column Name | Type |+---------------+---------+| article_i ...
- Servlet HTTP Request Response笔记
# 今日内容: 1. Servlet 2. HTTP协议 3. Request## Servlet: 1. 概念 2. 步骤 3. 执行原理 4. 生命周期 ...
- Idea的jdbc中的查询与增删该
在上一篇的折磨中 终于写好了代码 来总结一下其中的奥妙 (相同部分:)1.有mysql并且与主机建立连接 2.有jar包并且复制到自己创建的libs文件下,右键add 3.需要写main方法 4.需要 ...
- elasticsearch之使用正则表达式自定义分词逻辑
一.Pattern Analyzer简介 elasticsearch在索引和搜索之前都需要对输入的文本进行分词,elasticsearch提供的pattern analyzer使得我们可以通过正则表达 ...
- ctfshow_web入门 PHP特性
PHP特性 这里以半做题,半学习为主,所以就显得比较啰嗦 阿巴阿巴,但是实际上,写得比较水,等过一段时间再总结一下 比较深刻的印象是:下一个手册,多看手册 从web135还是几开始,就是看的这个师傅的 ...
- FreeFileSync:开源的文件同步工具 | Linux 中国
转载知乎: https://zhuanlan.zhihu.com/p/194778373
- Cobaltstrike —— shellcode分析(一)
前言 搞iot搞久了,换个方向看看,改改口味. windows 常见结构体 在分析Cobaltstrike-shellcode之前我们得先了解一下windows下一些常见的结构体. X86 Threa ...
- IO相关了解
1.IO的概念 IO简单来讲就是对输入输出设备的简化表达形式 单片机中各种接口,进行数据流的传输 从磁盘中读取数据至内存,又或者从内存中写入磁盘 编程中的IO 此时的IO其应用程序的运行态,即进程-- ...