canvas合并两张图片--前端

需求：根据当前网页中的几张图片，在手机上长按，保存图片到相册或者发送给好友。

1. Canvas合成图片

drawCanvas(){var self = this;var imgsrcArray = [require('@/page/agent/agentexpand/img/bg.jpg'),'data:image/jpeg;base64,'+this.codeUrl];var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');canvas.width = 750;canvas.height = 1333;var imglen = imgsrcArray.length;var drawimg = (function f(n){if(n < imglen){var img = new Image();img.crossOrigin = 'Anonymous'; //解决跨域问题img.onload = function(){//ctx.save();if(n == 0){ctx.drawImage(img,0,0,750,1333);}else{ctx.drawImage(img,466,574,210,210);}f(n+1);} img.src = imgsrcArray[n];}else{self.downloadUrl = canvas.toDataURL("image/jpeg");self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");}})(0);
}

vue语法调用方式：<img :src="'data:image/jpeg;base64,' + downloadUrl"/>

2. Canvas合成图片

HTML5给我们提供了一个很好的图像处理神器Canvas，想要合成图片，我们首先得将图片按照一定顺序、大小和位置一张张绘制到Canvas画布中去，最后再将整个Canvas导出为图片。

// 图片合成插件
class ImgMerge {constructor(imgs = [], options){// 图片数组默认配置项let defaultImgsItem = {  url: '',   x: 0,    y: 0   };// 导出图片的格式与压缩程度默认配置项let defaultOpts = {    type: 'image/jpeg',   compress: 1    };try {imgs.forEach((item,i,arr) => {arr[i] = Object.assign({},defaultImgsItem,item)}); }catch (e) {    throw '请传入一个正确的对象数组作为参数'; }this.imgs = imgs;   // 图片数组配置项this.opts = Object.assign({},defaultOpts,options);   // 其他配置项this.imgObjs = [];   // 图片对象数组this.createCanvas();  // 创建画布return this.outputImg();  // 导出图片}// 创建画布createCanvas(){let canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');let w = this.imgs[0].width,    h = this.imgs[0].height;if(!w){  throw '第一张图片宽度未设置';    }if(!h){  throw '第一张图片高度未设置';      }canvas.width = w;canvas.height = h;this.ctx = ctx;}// 绘制图片drawImg(i){let img = new Image();img.src = this.imgs[i].url;this.imgObjs.push(img);return new Promise((resolve)=>{  img.onload = resolve;  });}// 导出图片outputImg(){let imgArr = [];// 将单张图片的Promise对象存入数组this.imgs.forEach((item,i) => {  imgArr.push(this.drawImg(i));  });// 所有图片加载成功后将图片绘制于Canvas中，后将Canvas导出为图片return Promise.all(imgArr).then(()=>{this.imgs.forEach((item,i) => {let drawPara = [this.imgObjs[i], this.imgs[i].x, this.imgs[i].y];// 此处判断参数中图片是否设置了宽高，若宽高均设置，则绘制已设置的宽高，否则按照图片默认宽高绘制if(this.imgs[i].width && this.imgs[i].height){drawPara.push(this.imgs[i].width, this.imgs[i].height);}this.ctx.drawImage(...drawPara);});// 以base64格式导出图片return Promise.resolve(this.ctx.canvas.toDataURL(this.opts.type),this.opts.compress);});}
}
window.ImgMerge = ImgMerge;   //  可用于全局引用
export default ImgMerge;   //  可用于模块化引用

使用

import ImgMerge from './imgMerge.js';
window.onload = function () {let imgMerge = new ImgMerge([{  url: require('../images/bg.jpg'),  width: 640,  height: 1169   },{  url: require('../images/1.jpg'),  width: 200,   height: 200    }]);imgMerge.then(img => {let mergeImg = new Image();mergeImg.src = img;mergeImg.onload = () => {document.body.appendChild(mergeImg);};});
};

参考1111

参考2222

参考3333

canvas合并两张图片--前端相关推荐

小程序用canvas合并两张图片
<canvas canvas-id="share" style="width:100%;height:{{screenH + 'px'}}">< ...
使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】
CSS3 Canvas 实现两张图片合成一张图片需求需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...
运用canvas将两张图片画在一起，生成一张新的图片，然后实现点击下载图片
运用canvas将两张图片img1,img2画在一起,生成一张新的图片img3,然后实现点击下载图片img3 代码如下: <!DOCTYPE html> <html lang=&qu ...
uniapp怎么使用canvas把两张图片合并成一张图片
首先,在你的 vue 组件中引入 uni-canvas: <template><view class="canvas-container"><uni- ...
ios合并两张图片(叠加两张图片重合两张图片)
第一张图片第二张图片效果图创建一个 UIImageView (黑斜体是关键一行代码)UIImageView *imgView = [[UIImageView alloc]initWithFram ...
canvas 将两张图片叠加
创建一个 canvas 元素 <canvas id="canvas"></canvas> 获取 canvas 元素 getContext() 方法可返回一个 ...
uni-app使用canvas将两张图片合成一张图片
1.HTML部分 <view class="poster" id="canvas"><img id="avatar" /& ...
iOS 合并两张图片(叠加两张图片重合两张图片)
最近产品给了一个奇葩的需求,需要把一个活动海报和用户生成的二维码合成一张图片,分享出去,效果如下: 创建一个 UIImageView (黑斜体是关键一行代码) UIImageView *imgView ...
Python实现批量合并多张图片的方法(附源码)
前言如何通过Python快速实现批量将多张图片进行合并(重叠)处理呢,例如如下文件夹中,有两个图层文件夹,分别为: termap:天地图底图瓦片 overlay_t:天地图标注瓦片我们是目标是将t ...

canvas合并两张图片--前端

1. Canvas合成图片

2. Canvas合成图片

canvas合并两张图片--前端相关推荐

最新文章

热门文章