js利用canvas合成图片
转自 前端老徐
合成图片
//须引入jq
function draw() {
var base64=[];
var src = https://www.it610.com/article/$('#qrcode').find('img').attr('src');
var data = https://www.it610.com/article/['/wap/img/about.png', src];
//图片数组
var c = document.createElement('canvas'),
ctx = c.getContext('2d');
c.width = 400;
c.height = 400;
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff';
ctx.fill();
var img = new Image;
img.onload = function () {
img.src = https://www.it610.com/article/data[0];
ctx.drawImage(img, 0, 0, 400, 400);
//定位图片位置及大小
img.src=data[1];
ctx.drawImage(img, 100, 100, 200, 200);
base64.push(c.toDataURL("image/jpeg", 0.8));
fn();
}
return base64;
//base64[0]即为图片的src
}
递归方式合成图片
function hecheng(){
draw(function(){
document.getElementById('imgBox').innerHTML='【js利用canvas合成图片】合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！
';
})
}//图片的src
var data=https://www.it610.com/article/['img1.png','img2.png','img3.png','img4.png'],base64=[];
function draw(fn){
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=290;
c.height=290;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
if(n推荐阅读
- 美妆护肤|合成生物技术加速美妆个护「成分党」崛起
- JavaScript|JavaScript canvas绘制动态圆环进度条
- 微信小程序用canvas实现圆形进度条
- 如何利用python读取图片属性信息
- 利用kubernetes资源锁完成自己的HA应用
- 被误解的CPU利用率、超线程、动态调频|被误解的CPU利用率、超线程、动态调频 —— CPU 性能之迷 Part 1
- JS页面动态绘图工具SVG，Canvas，VML介简介
- 前端|【HTML+CSS+JS】注册页面模板
- 利用jemalloc解决flink的内存溢出问题
- 利用Java实现天气预报播报功能