vue实现签名和两张图片合成一张

效果就是如下了，
签名的组件我用的是百度的这个组件，地址是：https://github.com/JaimeCheng/vue-esign

使用组件的话：
安装
npm install vue-esign --save
引入
import vueEsign from ‘vue-esign’
Vue.use(vueEsign)

<template><div><vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" /><button @click="handleReset">清空画板</button><button @click="handleGenerate">生成图片</button><button @click="drawProdPicture">合成图片</button><div style="border: solid 2px red"><img :src="resultImg"></div><img :src="makePic"></div></template>
<script>/*** npm install vue-esign --save** https://github.com/JaimeCheng/vue-esign*/import Vue from 'vue';//引入组件import vueEsign from 'vue-esign';//这里就是我猫咪照片的地址import bgPic from '@/assets/images/demo.jpg';Vue.use(vueEsign)export default {data () {return {lineWidth: 6,lineColor: '#000000',bgColor: '',//签名图resultImg: '',isCrop: false,//底图bgPic: bgPic,makePic: ''}},methods: {handleReset () {this.$refs.esign.reset()},handleGenerate () {this.$refs.esign.generate().then(res => {debuggerthis.resultImg = resconsole.log(res);}).catch(err => {alert(err) // 画布没有签字时会执行这里 'Not Signned'})},drawProdPicture () {debugger;let img1 = new Image()img1.src = this.bgPicimg1.width = 1496img1.height = 866img1.setAttribute('crossOrigin', 'anonymous')let canvas = document.createElement("canvas")let context = canvas.getContext("2d")canvas.width = 1500canvas.height = 866let img2 = new Image()let flag = true// 将 img1 加入画布img1.onload = () => {context.drawImage(img1, 0, 0, 1495, 866)img2.src = this.resultImgimg2.setAttribute('crossOrigin', 'anonymous')img2.width = 60img2.height = 30if (flag) {flag = false} else {let src = canvas.toDataURL()this.makePic = src}}// 将 img2 加入画布img2.onload = () => {context.drawImage(img2, 1000, 566, 160, 136)if (flag) {flag = false} else {let src = canvas.toDataURL('image/png')this.makePic = src}}}}}
</script>

如果是H5实现这个功能的话可以参考这篇文章：https://blog.csdn.net/weixin_42102798/article/details/103615523

vue实现签名和两张图片合成一张相关推荐

PIL实现两张图片合成一张，和图片加文字
PIL实现两张图片合成一张,和图片加文字文章目录: 一.PIL实现两张图片合成一张 1.方法一: 2.方法二二.图片添加文字首先说明一下: (小姐姐是谁,是my sweetheart ,请勿使用 ...
什么相片可以两张弄成一张_怎么将两张图片合成一张？
有时候我们需要将两张图片放在一起相比较,但是两张图片相互切换对比起来比较困难,有没有什么办法将两张图片合成一张?方法是肯定有的,而且还是多种多样的,本文就给大家介绍一种对普通用户来说最简单方便快捷的方 ...
什么相片可以两张弄成一张_ps怎么把两张图片合成一张
ps怎么把两张图片合成一张图片应用在我们的生活中十分广泛,Photoshop似乎已经离不开我们的生活.点点滴滴回忆刻印成一张张图片.不过有不少网友却不知道ps怎么把两张图片合成一张,下文将一一为大家 ...
如何将两张图片合成一张pdf
在职场工作中,学会处理PDF文件是必不可少的技能.由于PDF文档的特殊性,许多新手在编辑PDF文件时往往不知道从何入手.比如一些非pdf格式的文件,像图片,在使用的时候被指定必须使用pdf格式的,这个 ...
android 两张电信_两张图片合成一张app-2张图片合成一张app下载1.2.9 官方安卓版-西西软件下载...
两张图片合成一张app是一款可以把手机上的2张图片合成一张并且看不出是合成的图片的工具,玩转2张图片叠加,可以让你和偶像合照不是梦很逼真的!带你打造与众不同的作品!可以制作双重曝光效果的APP,带你打 ...
使用canvas来实现两张图片合成一张
写在开头: 最近遇到一个需求,就是上传一张图片,原来的图片作为底图,两张图片组合在一起,形成一张新的图片.并能点击另存. 网上各种百度,谷歌.有很多方法.然后在我的需求里面都不是很适用.就结合前人的成 ...
小程序canvan画布，现两张图片合成一张，并保存到本地
微信小程序合成照片应用canvas把他们绘制到一张图上保存到本地相册然后点击分享自定义一个组件 components/canvas.js里 // components/canvas/canvas. ...
实用常识 | 如何将多张图片合成一张gif图片（使用Win10自带工具or利用Photoshop实现）
今天遇到了一个需求,需要将多张图片合成一张gif图片,利用搜索引擎搜来搜去,尝试了很多在线的网页端工具,不过要么是有水印,要么是需付费,而且合成效果也不是很好,找来找去,Win10自带的视频合成工具也 ...
【Opencv】Python+openCV实现全景图拼接（左右两张图片拼接成一张全景图）
Python+openCV实现全景图拼接(左右两张图片拼接成一张全景图) 全景图拼接思路具体步骤代码与结果代码效果测试1 效果测试2 全景图拼接思路这个就是简单对左右两张图进行拼接,希望 ...
chatgpt赋能python：Python将两张图片拼接成一张图：让您的图片处理更高效！
Python将两张图片拼接成一张图:让您的图片处理更高效! 作为一个有着10年Python编程经验的工程师,我发现Python成为了许多项目的主要语言,其中涵盖了很多关于图像处理的应用程序.在本文中, ...

vue实现签名和两张图片合成一张

vue实现签名和两张图片合成一张相关推荐

最新文章

热门文章