其实就是将两张图片地址根据canvas组合在一起，我放到项目中因为会存在跨域问题，所以将图片转化成base64，后面还会带随机值，这样可避免图片跨域错误，正常情况下可以直接将图片放到canvas里面。
灵感来源：js 将多张图片合并成一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM案例 图片放大</title>
<script src="js/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="./viewer/viewer.css" />
<script src="./viewer/viewer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<img id="img1" src="img/1.jpg" width="350" height="700" />
<img id="img2" src="img/2021.png" width="350" height="700" />
</body>
<script type="text/javascript">
let img1Src = "";
let img2Src = "";
function getAjax(imageURL) {
$.ajax({
type: "GET",
url: imageURL,
beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=x-user-defined');
},
success: function (result, textStatus, jqXHR) {
if (result.length < 1) {
alert("The thumbnail doesn't exist");
$("#thumbnail").attr("src", "data:image/png;base64,");
return
}
var binary = "";
var responseText = jqXHR.responseText;
var responseTextLen = responseText.length;
for (i = 0; i < responseTextLen; i++) {
binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
}
img1Src = "data:image/png;base64," + btoa(binary);
// $("#thumbnail").attr("src", "data:image/png;base64," + btoa(binary));
},
error: function (xhr, textStatus, errorThrown) {
alert("Error in getting document " + textStatus);
}
});
}
function getAjax2(imageURL) {
$.ajax({
type: "GET",
url: imageURL,
beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=x-user-defined');
},
success: function (result, textStatus, jqXHR) {
if (result.length < 1) {
alert("The thumbnail doesn't exist");
$("#thumbnail").attr("src", "data:image/png;base64,");
return
}
var binary = "";
var responseText = jqXHR.responseText;
var responseTextLen = responseText.length;
for (i = 0; i < responseTextLen; i++) {
binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
}
img2Src = "data:image/png;base64," + btoa(binary);
// $("#thumbnail").attr("src", "data:image/png;base64," + btoa(binary));
},
error: function (xhr, textStatus, errorThrown) {
alert("Error in getting document " + textStatus);
}
});
}
getAjax('https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg');
getAjax2('https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_11f3e7e9412643b39e7a88ed13bcf67b_002216_00.jpg');
setTimeout(function () {
drawAndShareImage("我是文字111", "我是文字222", "设备与行驶证合照");
}, 500)
// 将两张图片拼在一起
function drawAndShareImage(li1, li2, title) {
let fontPosition = 30; // 字体需要在上面，不影响图片信息
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 800 + fontPosition;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.font = "28px serif";
context.fill();
console.log(img1Src.length)
console.log(img2Src.length)
if (img1Src.length == 0) {
console.log("现在的版本没有图片")
var myImage2 = new Image();
// 解决跨域问题
myImage2.setAttribute('crossOrigin', 'anonymous');
myImage2.src = img2Src;//你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function () {
context.drawImage(myImage2, fontPosition, fontPosition, canvas.width - fontPosition - fontPosition, canvas.height - fontPosition - fontPosition); // 第二张图片的位置 margin-left margin-top width height
context.fillStyle = '#000';
context.fillText(li2, canvas.width / 2.5, 25); // 第二个图片的文字信息
context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
const imgDom = document.createElement('img');
imgDom.src = base64;
imgDom.id = "imgimg";
imgDom.style.display = "none";
document.body.appendChild(imgDom);
var viewer = new Viewer(document.getElementById('imgimg'), {
url: 'src'
});
$("#imgimg").click();
}
} else if (img2Src.length == 0) {
console.log("历史的版本没有图片")
var myImage = new Image();
// 解决跨域问题
myImage.setAttribute('crossOrigin', 'anonymous');
myImage.src = img1Src;//你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function () {
context.drawImage(myImage, fontPosition, fontPosition, canvas.width - fontPosition - fontPosition, canvas.height - fontPosition - fontPosition); // 第二张图片的位置 margin-left margin-top width height
context.fillStyle = '#000';
context.fillText(li1, canvas.width / 2.5, 25); // 第二个图片的文字信息
context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
const imgDom = document.createElement('img');
imgDom.src = base64;
imgDom.id = "imgimg";
imgDom.style.display = "none";
document.body.appendChild(imgDom);
var viewer = new Viewer(document.getElementById('imgimg'), {
url: 'src'
});
$("#imgimg").click();
}
} else {
console.log("都有图片")
var myImage = new Image();
// 解决跨域问题
myImage.setAttribute('crossOrigin', 'anonymous');
myImage.src = img1Src;//背景图片你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
// 两张图片合并成一张代码
myImage.onload = function () {
context.drawImage(myImage, 0, fontPosition, (canvas.width / 2) - 5, canvas.height - fontPosition - fontPosition); // 第一张图片的位置 margin-left margin-top width height
context.fillStyle = '#000';
context.fillText(li1, canvas.width / 5, 25); // 第一个图片的文字信息
context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
var myImage2 = new Image();
// 解决跨域问题
myImage2.setAttribute('crossOrigin', 'anonymous');
myImage2.src = img2Src;//你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function () {
context.drawImage(myImage2, (canvas.width / 2) + 5, fontPosition, (canvas.width / 2) - 5, canvas.height - fontPosition - fontPosition); // 第二张图片的位置 margin-left margin-top width height
context.fillStyle = '#000';
context.fillText(li2, canvas.width - canvas.width / 3, 25); // 第二个图片的文字信息
context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
const imgDom = document.createElement('img');
imgDom.src = base64;
imgDom.id = "imgimg" + Math.floor(Math.random() * 60);
imgDom.style.display = "none";
document.body.appendChild(imgDom);
console.log(imgDom.id)
var viewer = new Viewer(document.getElementById(imgDom.id), {
url: 'src'
});
$("#" + imgDom.id).click();
}
}
}
}
// getImage("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg")
// getImage2("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_11f3e7e9412643b39e7a88ed13bcf67b_002216_00.jpg")
// function getImage(url) {
// const xhr = new XMLHttpRequest()
// xhr.onload = function () {
// const url_blob = URL.createObjectURL(this.response)
// const image = new Image()
// image.src = url_blob;
// img1Src = url_blob;
// }
// // url 图片的地址
// xhr.open('GET', url, true)
// xhr.responseType = 'blob'
// xhr.send()
// }
// function getImage2(url) {
// const xhr = new XMLHttpRequest()
// xhr.onload = function () {
// const url_blob = URL.createObjectURL(this.response)
// const image = new Image()
// image.src = url_blob;
// img2Src = url_blob;
// }
// // url 图片的地址
// xhr.open('GET', url, true)
// xhr.responseType = 'blob'
// xhr.send()
// }
// function drawAndShareImage(li1, li2, title) {
// let fontPosition = 30; // 字体需要在上面，不影响图片信息
// var canvas = document.createElement("canvas");
// canvas.width = 800;
// canvas.height = 800 + fontPosition;
// var context = canvas.getContext("2d");
// context.rect(0, 0, canvas.width, canvas.height);
// context.fillStyle = "#fff";
// context.font = "28px serif";
// context.fill();
// var myImage = new Image();
// // 解决跨域问题
// myImage.setAttribute('crossOrigin', 'anonymous');
// myImage.src = img1Src;//背景图片你自己本地的图片或者在线图片
// myImage.crossOrigin = 'Anonymous';
// // 两张图片合并成一张代码
// myImage.onload = function () {
// context.drawImage(myImage, 0, fontPosition, canvas.width / 2, canvas.height - fontPosition - fontPosition); // 第一张图片的位置 margin-left margin-top width height
// context.fillStyle = '#000';
// context.fillText(li1, canvas.width / 5, 25); // 第一个图片的文字信息
// var myImage2 = new Image();
// // 解决跨域问题
// myImage2.setAttribute('crossOrigin', 'anonymous');
// myImage2.src = img2Src;//你自己本地的图片或者在线图片
// myImage2.crossOrigin = 'Anonymous';
// myImage2.onload = function () {
// context.drawImage(myImage2, (canvas.width / 2) + 1, fontPosition, (canvas.width / 2) - 1, canvas.height - fontPosition - fontPosition); // 第二张图片的位置 margin-left margin-top width height
// context.fillStyle = '#000';
// context.fillText(li2, canvas.width - canvas.width / 3, 25); // 第二个图片的文字信息
// context.fillText(title, canvas.width / 3, canvas.height - 5); // 第三个图片的文字信息
// var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
// const imgDom = document.createElement('img');
// imgDom.src = base64;
// imgDom.id = "imgimg";
// imgDom.style.display = "none";
// document.body.appendChild(imgDom);
// var viewer = new Viewer(document.getElementById('imgimg'), {
// url: 'src'
// });
// $("#imgimg").click();
// }
// }
// }
// function getBase64Image (src) {
// return new Promise(resolve => {
// const img = new Image()
// img.crossOrigin = ''
// img.src = src
// img.onload = function () {
// const canvas = document.createElement('canvas')
// canvas.width = img.width
// canvas.height = img.height
// const ctx = canvas.getContext('2d')
// ctx?.drawImage(img, 0, 0, img.width, img.height)
// const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
// const dataURL = canvas.toDataURL('image/' + ext)
// console.log(dataURL)
// $("#img1").attr("src", dataURL)
// resolve(dataURL)
// }
// })
// }
// getBase64Image("https://www.chinamdvr.com:9201/v1/api/mgmt/deviceSetup/attachment/2023-10-31/01_0180fb8afe5f4241a26ef98902038fd1_184410_00.jpg")
// 将两张图片拼在一起
// function drawAndShareImage(img1, img2) {
// var canvas = document.createElement("canvas");
// canvas.width = 700;
// canvas.height = 700;
// var context = canvas.getContext("2d");
// context.rect(0, 0, 350, 350);
// context.fillStyle = "#fff";
// context.fill();
// var myImage = new Image();
// myImage.src = img1;//背景图片你自己本地的图片或者在线图片
// myImage.crossOrigin = 'Anonymous';
// // 两张图片合并成一张代码
// myImage.onload = function () {
// context.drawImage(myImage, 0, 0, 350, 350); // 第一张图片的位置 margin-left margin-top width height
// context.font = "20px";
// context.fillText("我是文字", 150, 150); // 第一个图片的文字信息
// var myImage2 = new Image();
// myImage2.src = img2;//你自己本地的图片或者在线图片
// myImage2.crossOrigin = 'Anonymous';
// myImage2.onload = function () {
// context.drawImage(myImage2, 350, 0, 350, 350); // 第一张图片的位置 margin-left margin-top width height
// context.font = "20px";
// context.fillText("我是文字", 450, 150); // 第二个图片的文字信息
// var base64 = canvas.toDataURL("image/png");//"image/png"这里注意一下
// const imgDom = document.createElement('img');
// imgDom.src = base64;
// document.body.appendChild(imgDom);
// return base64
// }
// }
// }
</script>
</html>
