JS实现图片合并
2021-11-03 本文已影响0人
武汉前端任金杰
image.png
合并后的图片
image.png
废话不多说直接上源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt="" />
<img src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg" alt="" />
<button id="btn">下载</button>
<img src="" id="avatar" alt="" />
<script>
let btn = document.getElementById('btn')
btn.onclick = function(params) {
drawAndShareImage()
}
function downloadImg(url) {
var x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = function(e) {
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a')
a.href = url
a.download = ''
a.click()
}
x.send()
}
</script>
<script>
function drawAndShareImage() {
var canvas = document.createElement('canvas')
canvas.width = 700
canvas.height = 700
var context = canvas.getContext('2d')
context.rect(0, 0, canvas.width, canvas.height)
context.fillStyle = '#fff'
context.fill()
var myImage = new Image()
myImage.src =
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg' //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous'
myImage.onload = function() {
context.drawImage(myImage, 0, 0, 700, 350)
var myImage2 = new Image()
myImage2.src =
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg' //你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous'
myImage2.onload = function() {
context.drawImage(myImage2, 0, 350, 700, 350)
var base64 = canvas.toDataURL('image/png') //"image/png" 这里注意一下
var img = document.getElementById('avatar')
// document.getElementById('avatar').src = base64;
img.setAttribute('src', base64)
downloadImg(base64)
}
}
}
</script>
</body>
</html>
