利用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的味道. 实际的应用中,矩阵的合并是一个经常发生的操作,如何利 ...
随机推荐
- SQL基本概念-SQL通用语法
SQL基本概念 1. 什么是SQL ? Structured Query Language : 结构化查询语言,其实就是定义了操作所有关系型数据库的规则.每一种数据库操作的方式存在不一样的地方,称为 ...
- Jenkins搭建与数据迁移实践
概述 本文主要介绍内容如下: 1.使用Docker搭建Jenkins 2.迁移原Jenkins数据到新搭建的Jenkins中 3.在Jenkins容器内部配置Maven的私服配置 4.在Jenkins ...
- 11月21日内容总结——多进程实现TCP服务端并发、互斥锁、线程及代码实现、GIL全局解释器锁、信号量、event事件、进程池和线程池、协程
目录 一.多进程实现TCP服务端并发 二.互斥锁代码实操 1.互斥锁的概念 2.互斥锁的使用 3.死锁现象 4. 小结 三.线程理论 进程 线程 线程简介 为什么要使用多线程? 多线程概念 多进程的优 ...
- rt-thread模糊到清晰系列: irq.c
#include <rthw.h> #include <rtthread.h> // 进入离开中断的钩子函数 #ifdef RT_USING_HOOK static void ...
- vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等...
vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等... 最近项目中有个需求,datePicker选项,需要实现增加一个 ...
- pytest基本使用指南
注:关于pytest的基础要点个人已经总结好了, 一. 启动: 在主函数main下启动:pytest.main(['-q','test_demo.py']) 在命令行启动:pytest ./test_ ...
- 代码随想录算法训练营day03 | LeetCode 203/707/206
基础知识 数据结构初始化 // 链表节点定义 public class ListNode { // 结点的值 int val; // 下一个结点 ListNode next; // 节点的构造函数(无 ...
- Blender如何设置模型中心点
推荐:将 NSDT场景编辑器 加入你的3D开发工具链. 在使用Blender建模的时候,有时候会导入一些从别的地方**过来的模型,这时候就会遇到一个问题,模型放到场景中时与鼠标放置的位置有一定的偏差, ...
- CentOS 搭建 samba 服务器并通过 Windows 访问
第一步 下载安装 samba.samba-client sudo yum -y install samba samba-client 终端提示安装完成 第二步 创建共享文件夹,这个文件夹到时候可以通过 ...
- jquery获得标签元素
一.根据元素name值获取元素 $("元素[name="name的值"]"); 例子:1.$("a[name="apoint"]& ...